jq scrollTop() 方法

最新推荐文章于 2023-06-17 13:58:23 发布

泥猴桃

最新推荐文章于 2023-06-17 13:58:23 发布

阅读量1.8k

点赞数

文章标签： css jquery scrollTop

本文链接：https://blog.csdn.net/shi851051279/article/details/78187445

版权

使用方法
给要滑动的元素的父级添加 scrollTop()方法，前提是滑动块的父级一定要用绝对定位，然后css 里加上 overflow:auto;才可以获取到值
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <script src="jquery.min.js" type="text/javascript"></script>
    <style>
        .wrap {
            width:100%;
            overflow: auto;
            position: absolute;
            top:0;
            bottom:0;
        }
        ul {
            padding:0;
            margin:0;
            list-style: none;
            width:100%;
            height:auto;
        }
        li {
            height:40px;
        }
    </style>
</head>
<body>

<div class="wrap">
    <ul>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
        <li>233452345</li>
    </ul>
</div>
<script>

    $(document).ready(function(){
        // scrollTop() 一定要绑定到滑动元素的父级上 才能获取到值（父级一定要加绝对定位）
        $('.wrap').on('click',function(){
            console.log($(this).scrollTop());
        });
//        $('.wrap').get(0).addEventListener('touchmove',function(){
//            console.log($(this).scrollTop());
//        })

    })
</script>

</body>
</html>

泥猴桃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq scrollTop() 方法

使用方法给要滑动的元素的父级添加 scrollTop()方法，前提是滑动块的父级一定要用绝对定位，然后css 里加上 overflow:auto;才可以获取到值代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="view
复制链接

扫一扫