JS滾動到元素在視口中間

我有一張桌子上有很多物品。要查看這些項目，我必須從左向右滾動。現在我想滾動一個特定的項目。但我希望項目顯示在表格可見部分的中間。JS滾動到元素在視口中間

我試圖讓項目的左側和寬度的一半得到中間，並滾動到該點。但那並沒有奏效。所以我試圖添加表格的一半寬度。這也沒有奏效。有趣的是，如果我改變網站的寬度，它會滾動到可見部分的不同位置。

我創造了我的問題的短期和很好的例子：

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>

有沒有簡單的方法來滾動幾個像素？因爲我有這個理論，它不使用像素進行滾動。

來源

2016-04-03 Mr.Tr33

它使用像素進行滾動，但偏移位置不等於滾動位置。要測試它，您可以在控制檯中輸出值$(".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; 
});

來源

2016-04-03 14:15:55 wigi

JS滾動到元素在視口中間

回答

相關問題