JavaScript原生 & jQuery 获取 & 设置滚动条移动长度、高度 / scroll

最新推荐文章于 2022-10-22 18:51:09 发布

freedom_文

最新推荐文章于 2022-10-22 18:51:09 发布

阅读量2.8k

点赞数 1

分类专栏： javascript jquery

本文链接：https://blog.csdn.net/freedomVenly/article/details/89637164

版权

javascript 同时被 2 个专栏收录

49 篇文章 1 订阅

订阅专栏

jquery

9 篇文章 1 订阅

订阅专栏

在这里插入图片描述

记录备忘：


	
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{width: 500px;height: 300px;margin: 100px;overflow: auto}
        #d2{width: 1000px;
            height: 800px;background: #aaf;}
    </style>
</head>
<body>

<div id="d1">
    <div id="d2"></div>
</div>

js原生版：

scrollTop   /  scrollLeft

<br><br>

<button onclick="jsScoGet()">获取</button>
<button onclick="jsScoSet()">设置</button>

<script>
    function jsScoGet() {

        //括号里面不写值是 获取操作
        // alert(document.getElementById('d1').scrollTop );     //获取滚动的高
        alert(document.getElementById('d1').scrollLeft );       //获取滚动的长
    }

    function jsScoSet() {

        //括号里面写值是 设置操作
        // document.getElementById('d1').scrollTop=100;        //设置滚动条高度的位置
        document.getElementById('d1').scrollLeft=100;         //设置滚动条长度的位置
    }
</script>

<br>

<br><hr><br>
<h3>jQuery版：</h3>

API：scrollTop()   /

<button onclick="jqScoGet()">获取</button>
<button onclick="jqScoSet()">设置</button>

<script src="../jquery-1.12.4.min.js"></script>
<script>
    function jqScoGet() {

            //括号里面不写值是 获取操作
        // alert($("#d1").scrollTop());             //获取滚动的高
        alert($("#d1").scrollLeft());              //获取滚动的长
    }

    function jqScoSet() {

        //括号里面写值是 设置操作
        // $("#d1").scrollTop(100);         //设置滚动条高度的位置
        $("#d1").scrollLeft(200);           //设置滚动条长度的位置
    }
</script>

</body>
</html>

freedom_文

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript原生 & jQuery 获取 & 设置滚动条移动长度、高度 / scroll

记录备忘： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #d1{width: 500px;height: 300px;margi...
复制链接

扫一扫