Question

我有一张桌子，里面有很多物品。要查看项目，我必须从左向右滚动。现在我想滚动一个特定的项目。但我希望该项目显示在表格可见部分的中间。

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

我创建了一个简短而又很好的问题示例：

＆＃13;

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;
});

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

有没有简单的方法来滚动几个像素？因为我有这个理论，它没有使用像素滚动。

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滚动直到元素位于视口

1 个答案: