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

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

1. onmousewheel：鼠标滚轮事件，可以在任何元素上触发，同时在用户触发该事件时可以获得“event.wheelDelta”属性值。
2. “event.wheelDelta”：当用户向上滚动鼠标滚轮时，wheelDelta属性的值是150；当用户向下滚动鼠标滚轮时，wheelDelta属性的值是-150；（具体可以在自己的控制台测试，我用的谷歌浏览器出来的是150）
3. 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>