J'ai une table avec beaucoup d'éléments dedans. Pour voir les objets, je dois faire défiler de gauche à droite. Maintenant, je veux faire défiler un élément spécifique. Mais je veux que l'objet soit montré au milieu de la partie visible de la table.JS faire défiler jusqu'à ce que l'élément est au milieu de la fenêtre d'affichage
J'ai essayé d'obtenir le côté gauche de l'élément et la moitié de la largeur pour obtenir le milieu et de faire défiler jusqu'à ce point. Mais cela n'a pas fonctionné. J'ai donc essayé d'ajouter la moitié de la largeur de la table. Cela n'a pas fonctionné non plus. La chose amusante est que si je change la largeur du site il défile à une position différente de la partie visible.
J'ai créé un court exemple et agréable de mon problème:
var dummy = $(".dummy").clone();
for (var i = 0; i < 300; i++){
\t var item = dummy.clone();
\t if (i == 123)
\t \t item.addClass("scrollTo");
\t $("tr").append(item);
}
$(document).ready(function() {
\t var scrollToElement = $(".scrollTo");
\t var scrollToElementFullWidthTillMiddle = scrollToElement.offset().left + (scrollToElement.width()/2);
\t var scrollTo = scrollToElementFullWidthTillMiddle + ($(".wrapper").width()/2);
\t $(".wrapper")[0].scrollLeft = scrollTo;
});body{
\t width: 800px;
}
.wrapper{
\t overflow-x: auto;
\t width: calc(100% - 180px);
\t margin-left: 180px;
}
table{
\t table-layout: fixed;
}
td{
\t width: 10px;
\t height: 10px;
}
td:nth-child(2n){
\t background: gray;
}
td div{
\t width: inherit;
\t height: inherit;
}
.scrollTo{
\t background: red;
}<!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="UTF-8">
\t <title>Title</title>
\t <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
</head>
<body>
\t <div class="wrapper">
\t \t <table>
\t \t \t <tr>
\t \t \t \t <td class="dummy"><div></div></td>
\t \t \t </tr>
\t \t </table>
\t </div>
</body>
</html>est-il un moyen facile de faire défiler quelques pixels? Parce que j'ai cette théorie qu'il n'utilise pas de pixels pour le défilement.