【JavaScript】JS控制页面内指定滚动条的滑动距离

最新推荐文章于 2023-11-28 15:23:18 发布

白菜菜和向肉肉

最新推荐文章于 2023-11-28 15:23:18 发布

阅读量4.5k

点赞数 3

分类专栏： 2020 文章标签： html javascript jquery

本文链接：https://blog.csdn.net/weixin_42545254/article/details/106445115

版权

2020 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一个普普通通的div如何能做到滚动鼠标滚轮时滚动条滑动距离，查了一下没搜到现成的，试着用jQuery做了一个能用的。

注：

仅在Chrome 83.0.4103.61I下测试正常，其他浏览器没试。
需要链接jQuery.js。

以下为示例代码。

HTML

<script>
    window.onload = function () {
        setScrollLength("median-in", 40);
    };
</script>

<body>
    <div id="median-in">
        ......
    </div>
</body>

function setScrollLength(targetId, length) {
    EventUtil.addEventHandler(document.getElementById(targetId), "mousewheel", function (e) {
        if (e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
        if (e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }
        let nowScroll = document.getElementById(targetId).scrollTop;
        let top;
        if (e.wheelDeltaY < 0) {
            top = nowScroll + length;
        } else if (e.wheelDeltaY > 0) {
            top = nowScroll - length;
        }
        $("#" + targetId).animate({scrollTop: top}, 0);
    })
}

EventUtil = {
    addEventHandler(target, event, handler) {
        if (target.addEventListener) {
            target.addEventListener(event, handler, false);
        } else if (target.attachEvent) {
            target.attachEvent("on" + event, handler);
        } else {
            target["on" + event] = handler;
        }
    },

    removeEventHandler(target, event, handler) {
        if (target.removeEventListener) {
            target.removeEventListener(event, handler, false);
        } else if (target.detachEvent) {
            target.detachEvent("on" + event, handler);
        } else {
            target["on" + event] = null;
        }
    }
}

白菜菜和向肉肉

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
【JavaScript】JS控制页面内指定滚动条的滑动距离

一个普普通通的div如何能做到滚动鼠标滚轮时滚动条滑动距离，查了一下没搜到现成的，试着用jQuery做了一个能用的。注：仅在Chrome 83.0.4103.61I下测试正常，其他浏览器没试。需要链接jQuery.js。以下为示例代码。<script> window.onload = function () { setScrollLength("median-in", 40); };</script><body&
复制链接

扫一扫