0
私はそこに多くの項目を持つテーブルを持っています。アイテムを見るには、左から右にスクロールする必要があります。今私は特定の項目をスクロールしたい。しかし、私はアイテムがテーブルの目に見える部分の中央に表示されることを望みます。要素がビューポートの中央にあるまでスクロールします
アイテムの左側と幅の半分を取得して、そのポイントまでスクロールしようとしました。しかし、それはうまくいかなかった。そこで、テーブルの幅の半分を追加しようとしました。それもうまくいきませんでした。面白いのは、サイトの幅を変更すると、目に見える部分の別の位置にスクロールするということです。
私は私の問題の短いと良い例を作成しました：いくつかのピクセルをスクロールする簡単な方法があります
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>を？なぜなら、スクロールにピクセルを使用していないという理論があるからです。