JavaScript基础(33)_鼠标滚轮滚动事件、键盘事件

风之舞_yjf

已于 2024-08-14 17:18:23 修改

阅读量1.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

于 2024-08-14 17:15:24 首次发布

本文链接：https://blog.csdn.net/no15870678621/article/details/141195588

鼠标滚轮滚动事件：onwheel

获取鼠标滚轮滚动的方向：wheelDelta
比如：向上滚动：109 （所有正值都是向上）
向下滚动：-109（所有负值都是向下）

注意：当滚动滚动时，如果浏览器有滚动条，滚动条会随之滚动。这是浏览器的默认行为，如果不希望发生，则可以使用return false，取消默认行为。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>鼠标滚轮滚动事件</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }
    </style>
    <script>
        window.onload = function () {
            var box1 = document.getElementById("box1");
            box1.onwheel = function (event) {
                if (event.wheelDelta > 0) {
                    if (box1.clientHeight >= 100)
                        box1.style.height = box1.clientHeight - 20 + "px";
                    else
                        box1.style.