javascript核心技术（三十一）原生JS和jquery的滚动条控制

人亦已歌 · 发表于 2023-1-26 13:28:25

一、原生JS的滚动条控制方式
主要涉及的语法如下

box.scrollTop=Y;//值为距离顶部的像素长度
box.scrollLeft=X;//值为距离左边的像素长度

复制代码

下面请看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生JS滚动条控制</title>
</head>
<style>
    div{
    width: 400px;
    height: 600px;
    background-color: rgb(177, 196, 231);
    border: 2px solid rgb(218, 13, 13);
    margin: 60px auto;
    overflow: scroll;
    overflow-x: hidden;
}
</style>
<body>
    <div id="box">
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
    </div> 
</body>
<script>
    window.onload=function(){
    var box=document.getElementById("box");
    box.scrollTop=200;
}
</script>
</html>

只需要设置scrollTop的值即可控制滚动条，scrollLeft同理。
当然原生JS控制滚动条的方法还有很多，这里我们只讲最常用的。
二、jquery控制滚动条的方法

$('window').scrollTop(Y);垂直滚动条
$('window').scrollLeft(X);水平滚动条

复制代码

下面请看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./jquery.js"></script>
    <title>原生JS滚动条控制</title>
</head>
<style>
    div{
    width: 400px;
    height: 600px;
    background-color: rgb(177, 196, 231);
    border: 2px solid rgb(218, 13, 13);
    margin: 60px auto;
    overflow: scroll;
    overflow-x: hidden;
}
</style>
<body>
    <div id="box">
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p>
    </div> 
</body>
<script>
    $('#box').scrollTop(100);
</script>
</html>