隐藏滚动条使用js实现模拟滚动

最新推荐文章于 2024-07-22 17:30:43 发布

不恋水的雨

最新推荐文章于 2024-07-22 17:30:43 发布

阅读量289

点赞数

分类专栏： js 文章标签： jquery js css html

本文链接：https://blog.csdn.net/qq_36635569/article/details/111312133

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html style="height: 100%;width:100%" 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">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <title>模拟滚动条</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <style>
        .box{width:400px;height:400px;border: 1px solid red;overflow-y: hidden}
    </style>
</head>
<body>
    <div style="min-height: 500px"></div>
    <div style="min-height: 500px"></div>
    <div style="min-height: 500px"></div>
    <div class="box">
        111<br>111<br>
        222<br>222<br>
        333<br>333<br>
        444<br>444<br>
        555<br>555<br>
        666<br>666<br>
        777<br>777<br>
        888<br>888<br>
        999<br>999<br>
        111<br>111<br>
        222<br>222<br>
    </div>
    <div style="min-height: 500px"></div>
    <div style="min-height: 500px"></div>
    <div style="min-height: 500px"></div>

    <script>
        $(".box").bind("mousewheel",function(e){
            var ev = e.originalEvent;
            var dy = 20;
            if(ev.deltaY < 0){
                dy = -20;
            }
            $(this).scrollTop($(this).scrollTop()+dy);
            var h = $(this).scrollTop();
            var b1 = ev.deltaY > 0 && ($(this).scrollTop() + $(this).outerHeight() < $(this)[0].scrollHeight);
            var b2 = ev.deltaY < 0 && (h > 0);
            if(b1 || b2){
                e.preventDefault();
            }

        });
    </script>
</body>

不恋水的雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
隐藏滚动条使用js实现模拟滚动

<!DOCTYPE html><html style="height: 100%;width:100%" lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc.
复制链接

扫一扫

专栏目录