禁止事件的默认行为

最新推荐文章于 2024-05-30 11:27:58 发布

小孙小孙睡不醒

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量230

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/sylbiubiubiu/article/details/126675064

版权

该demo实现鼠标滚轴上滚高度减小，下滚高度增加。鼠标滚轴上滚不受影响，但下滚会优先滚动滚动条。
——>去除滚动条的影响，使下滚不受影响
在这里插入图片描述

            // 禁止事件的默认行为 dom2
            if(ev.preventDefault){
                ev.preventDefault()
            }

            // 禁止事件的默认行为 dom0
            return false

<!DOCTYPE html>
<html 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.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #test{
            width: 100%;
            height: 200px;
            background: pink;
        }
    </style>
</head>
<body style="height: 3000px;">
    <div id="test"></div>
</body>
<script>
    window.onload = function(){
        var testNode = document.querySelector('#test');

        // 火狐
        if(testNode.addEventListener){
            testNode.addEventListener("DOMMouseScroll",fn);
        }
        // ！非火狐浏览器
        testNode.onmousewheel = fn;

        function fn(ev){
            ev = ev||event;
            var dir = "";
            if(ev.wheelDelta){
                dir = ev.wheelDelta>0 ? "up":"down";
            }
            if(ev.detail){
                dir = ev.detail<0 ? "up":"down";
            }
            switch(dir){
                case "up":
                    testNode.style.height = testNode.offsetHeight - 10 +'px'
                    break;
                case "down":
                    testNode.style.height = testNode.offsetHeight + 10 +'px'
                    break;
            }

            // 禁止事件的默认行为 dom2
            if(ev.preventDefault){
                ev.preventDefault()
            }

            // 禁止事件的默认行为 dom0
            return false
        }

    }
</script>
</html>

在这里插入图片描述