0
İçinde çok sayıda öğe bulunan bir tablom var. Eşyaları görmek için soldan sağa kaydırmalıyım. Şimdi belirli bir öğeyi kaydırmak istiyorum. Ama ben maddenin masanın görünen kısmının ortasında gösterilmesini istiyorum.JS ilerletme öğesi öğesinin ortasına kadar kaydırılır.
Ortaya gitmek ve bu noktaya gitmek için öğenin sol tarafını ve genişliğinin yarısını almayı denedim. Ama bu işe yaramadı. Bu yüzden tablonun genişliğinin yarısını eklemeyi denedim. Bu da işe yaramadı. Komik olan şey, sitenin genişliğini değiştirirsem görünür kısmın farklı bir konumuna kaydırır. Birkaç piksel kaydırmak için herhangi bir kolaylık
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>var mı:
benim sorunun kısa ve güzel bir örnek oluşturdu? Çünkü bu teori, kaydırma için piksel kullanmıyor.