【小河今学 | Javascript】鼠标滚轮控制方块高度

最新推荐文章于 2024-06-13 19:48:08 发布

LB_laber

最新推荐文章于 2024-06-13 19:48:08 发布

阅读量230

点赞数

分类专栏：小河今学文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/LB_laber/article/details/126122292

版权

小河今学专栏收录该内容

27 篇文章 4 订阅

订阅专栏

本文介绍了如何使用JavaScript和onmousewheel事件，实现在鼠标滚轮滚动时动态调整div元素的高度，通过监听`event.wheelDelta`来实现高度增减，同时利用`clientHeight`获取元素可见区域。

摘要由CSDN通过智能技术生成

8.02 今天作业如下
创建一个div块，向上滚动鼠标滚轮减少div块的高度，向下滚动鼠标滚轮增加div块的高度。
主要用到 onmousewheel、clientHeight

onmousewheel：鼠标滚轮事件，可以在任何元素上触发，同时在用户触发该事件时可以获得“event.wheelDelta”属性值。
“event.wheelDelta”：当用户向上滚动鼠标滚轮时，wheelDelta属性的值是150；当用户向下滚动鼠标滚轮时，wheelDelta属性的值是-150；（具体可以在自己的控制台测试，我用的谷歌浏览器出来的是150）
clientHeight：：元素在页面上返回内容的可视宽度（不包括边框，边距或滚动条）

首先创建一个小方块，并给他固定的宽和高。

<div class="box1"></div>

.box1 {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: red;
        }

接着开始写JS，首先用querySelector获取到这个小方块，接着触发onmousewheel事件。
当e.wheelDelta > 0 （滚轮向上为150）时，让小方块的宽度减少10px，将这个减少后的值通过.style.height设置内联样式。
鼠标滚轮向下同理。

<script>
    // 1、创建一个div块，向上滚动鼠标滚轮减少div块的高度，向下滚动鼠标滚轮增加div块的高度。
    var box1 = document.querySelector('.box1');
    box1.onmousewheel = function(e) {
        var boxHeight = box1.clientHeight;
        if(e.wheelDelta > 0){
            // 向上滚轮
            boxHeight = boxHeight - 10;
            this.style.height = boxHeight + 'px';
        }else{
            // 向下滚轮
            boxHeight = boxHeight + 10;
            this.style.height = boxHeight + 'px';
        }
    }
</script>