JS滚动直到元素在视口中间

Question

我有一个 table，里面有很多东西。要查看项目，我必须从左向右滚动。现在我想滚动一个特定的项目。但我希望该项目显示在 table.

的可见部分的中间

我试图让项目的左侧和宽度的一半得到中间并滚动到那个点。但那没有成功。所以我试着加上table宽度的一半。那也没有用。有趣的是，如果我改变网站的宽度，它会滚动到可见部分的不同位置。

我为我的问题创建了一个简短而好的例子：

var dummy = $(".dummy").clone();
for (var i = 0; i < 300; i++){
 var item = dummy.clone();
 if (i == 123)
  item.addClass("scrollTo");

 $("tr").append(item);
}

$(document).ready(function () {
 var scrollToElement = $(".scrollTo");
 var scrollToElementFullWidthTillMiddle = scrollToElement.offset().left + (scrollToElement.width() / 2);
 var scrollTo = scrollToElementFullWidthTillMiddle + ($(".wrapper").width() / 2);

 $(".wrapper")[0].scrollLeft = scrollTo;
});

body{
 width: 800px;
}

.wrapper{
 overflow-x: auto;
 width: calc(100% - 180px);
 margin-left: 180px;
}

table{
 table-layout: fixed;
}

td{
 width: 10px;
 height: 10px;
}

td:nth-child(2n){
 background: gray;
}

td div{
 width: inherit;
 height: inherit;
}

.scrollTo{
 background: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
</head>
<body>
 <div class="wrapper">
  <table>
   <tr>
    <td class="dummy"><div></div></td>
   </tr>
  </table>
 </div>
</body>
</html>

有没有简单的方法可以滚动几个像素？因为我认为它不使用像素进行滚动。

Answer 1

它是使用像素滚动，但是偏移位置不等于滚动位置。要测试它，您可以在控制台中输出 $(".wrapper td").first().offset().left 和 $(".wrapper")[0].scrollLeft 的值（在更新之前）。

这就是我可以解决您的问题的方法：

$(document).ready(function () {
    var scrollToElement = $(".scrollTo");
    var scrollToElementFullWidthTillMiddle = scrollToElement.offset().left + (scrollToElement.outerWidth() / 2);
    var scrollTo = scrollToElementFullWidthTillMiddle - $(".wrapper td").first().offset().left - ($(".wrapper").outerWidth()/2);

    $(".wrapper")[0].scrollLeft = scrollTo;
});

JS滚动直到元素在视口中间

JS scroll till element is in the middle of viewport

jquery

scrollto

horizontal-scrolling

css-tables