JS练习 div块根据滚轮变化

最新推荐文章于 2023-08-29 09:46:27 发布

格格不入ち

最新推荐文章于 2023-08-29 09:46:27 发布

阅读量318

点赞数

分类专栏：前端文章标签： html5 javascript html

本文链接：https://blog.youkuaiyun.com/qq_45234177/article/details/120252028

版权

滚轮事件 div元素滚动高度 JavaScript DOM操作

关键词由优快云通过智能技术生成

前端专栏收录该内容

16 篇文章

订阅专栏

目标：
创建一个div块，在div块上操作滚轮，滚轮向下滚动时div块变高（高度增加）；滚轮向上滚动时div块高度减小。
代码：

<!DOCTYPE html>
<html lang="zh">
<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>滚轮事件练习</title>
</head>
<body>
    <div id="box6">box6</div>
    <script>
        // 滚轮事件
        // 滚轮向下，框边长，滚轮向下，框变短
        var box6 = document.getElementById("box6");

        // IE中必须使用addEventListener()方法 IE9
        // box6.addEventListener("wheel",function(event){
        //     event = event || window.event;
        //     // deltaY 向下滚为正值，向上滚为负值
        //     var y = event.deltaY;
        //     if(y > 0)
        //     {
        //         box6.style.height = box6.clientHeight + 100 + "px";
        //     }else{
        //         box6.style.height = box6.clientHeight - 100 + "px";
        //     }
        //     // 取消浏览器默认滚动条滚动事件
        //     event.preventDefault();
        // },false);

        //IE8
        // box6.attachEvent("onmousewheel",function(event){
        //     event = event || window.event;
        //     // wheelDelta 向下滚为负值，向上滚为正值
        //     var y = event.wheelDelta;
        //     if(y < 0)
        //     {
        //         box6.style.height = box6.clientHeight + 100 + "px";
        //     }else{
        //         box6.style.height = box6.clientHeight - 100 + "px";
        //     }   
        // });

        //其他浏览器 
        box6.onwheel = function(event){
            // deltaY 向下滚为正值，向上滚为负值
            var y = event.deltaY;
            // 向下滚动
            if(y > 0)
            {
                box6.style.height = box6.clientHeight + 100 + "px";
            }else{
                if(box6.clientHeight > 100){
                    box6.style.height = box6.clientHeight - 100 + "px";
                }
                
            }
            // 取消浏览器默认滚动条滚动事件
            return false;
        };
    </script>
</body>
</html>