在 HTML 中设置块元素的滚动条位置

Question

我想在页面加载时将块的滚动条位置设置为特定坐标。

我发现最接近的是

window.scrollTo

JavaScript 中的方法，设置整个页面的水平和垂直滚动条在浏览器中的滚动条位置。然后可以在加载页面时运行此脚本。

我想对这样的块做同样的事情：

<div>
    <p> lots of text </p>
<div>
<style>
    div {
        overflow: scroll;  
}
</style>

Answer 1

您可以使用scroll的scrollTop和scrollLeft属性来执行此操作。

<style>
    .scrollable {
        width: 200px;
        height: 200px;
        overflow: auto;
        border: 1px solid #ccc;
    }
</style>

<script>
    window.onload = function() { 
        //runs on page load
        // Set the desired scroll position x,y
        var x = 0; // Horizontal scroll position
        var y = 100; // Vertical scroll position
        
        // Get the scrollable block
        var block = document.getElementById("scrollableBlock");
        
        // Set the scroll positions ez
        block.scrollLeft = x;
        block.scrollTop = y;
    };
</script>