js基础——滚动事件

最新推荐文章于 2024-02-10 09:00:00 发布

jwz934738949

最新推荐文章于 2024-02-10 09:00:00 发布

阅读量408

点赞数

分类专栏： javascript基础

本文链接：https://blog.csdn.net/jwz934738949/article/details/100796995

版权

javascript基础专栏收录该内容

36 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标滚动事件</title>
    <style>
        #box1 {
            width: 150px;
            height: 150px;
            position: absolute;
            background-color: aqua;
        }
    </style>
    <script>
        window.onload = function () {
            var b1 = document.getElementById("box1");
            b1.onmousewheel = function (event) {
                event = event || window.event;
                /*
                * 当body默认有滚动条时，再次滚动时，只会触发浏览器滚动条滚动，div元素不会滚动
                * 在函数末尾添加return false;
                * 但是这种方法只能修改调用addEventListener()的浏览器，对于IE浏览器无效
                * 使用event.preventDefault来支持IE浏览器，但是这种方法不支持IE8
                * 使用event.preventDefault && event.preventDefault()来判断。若不支持则不调用
                * */
                if (event.wheelDelta > 0 || event.detail < 0) {
                    b1.style.height = b1.clientHeight - 10 + "px";
                } else {
                    b1.style.height = b1.clientHeight + 10 + "px";
                }
                event.preventDefault && event.preventDefault();
                return false;
            };
            bind(b1, "DOMMouseScroll", b1.onmousewheel);

            function bind(obj, str, callback) {
                if (obj.addEventListener) {
                    obj.addEventListener(str, callback, false);
                } else {
                    //attachEvent只有在IE8中才能使用，该函数与addEventListener的作用一致
                    obj.attachEvent("on" + str, function () {
                        calllback.call(obj); //调用call()函数，让返回的对象一致，都为obj
                    });
                }
            }
        }
    </script>
</head>
<body style="height: 1500px;">
<div id="box1"></div>
</body>
</html>

jwz934738949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础——滚动事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鼠标滚动事件</title> <style> #box1 { width: 150px; ...
复制链接

扫一扫