当事件不是在整个正文上发生时，应在 div 内完成滚动

Question

我有一个 id 为test的div，如下所示：

<div id="test"></div>

此div是可滚动的，因为我将overflow-y设置为scroll

当我单击一个按钮时，此div应滚动到另一个div位置。所以我所做的是我使用 JavascriptscrollTo方法并滚动到某个随机位置，如下所示：

document.getElementById('test').scrollTo(0,300)

正如我在这里提到的id参考和滚动方法，我认为只有div会被滚动，但整个网站都在滚动。

单击按钮时，我应该如何将div滚动到某个位置，并且它应该只在div内滚动，而不是在正文的div内滚动。

我希望这在纯JavaScript中完成，在我的项目中不应该使用jQuery。

Answer 1

它工作正常吗？

var div = document.getElementById("test");
div.scrollTo(0,100)

#test{
height:200px;
overflow:scroll;
}
body{
height:1000px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>

Answer 2

可以使用scrollTop属性在页面中列出特定元素。有关详细信息，请参阅此文档：

https://www.w3schools.com/jsref/prop_element_scrolltop.asp

因此，您的代码将更改为此以滚动到位置300：

document.getElementById('test').scrollTop = 300