原生js——使用js控制滚动条的位置

我们在项目中可能会遇到这样的需求，控制页面滚动条的位置，来显示不同的内容。这里给出一个使用原生js来控制滚动条的方法，实现起来非常简单

一、HTML代码

<div id="box">
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
</div>

二、CSS代码

div{
    width: 200px;
    height: 200px;
    background-color: #ccc;
    border: 2px solid #666;
    margin: 60px auto;
    overflow: scroll;
    overflow-x: hidden;
}

三、js代码

window.onload=function(){
    var box=document.getElementById("box");
    box.scrollTop=box.scrollHeight;
}