JavaScript事件处理滚轮事件处理 - 问答

在JavaScript中，我们可以使用addEventListener方法为元素添加事件监听器。对于滚轮事件，我们需要监听wheel事件。以下是一个简单的示例，展示了如何使用JavaScript处理滚轮事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚轮事件示例</title>
    <style>
        .scroll-container {
            height: 200px;
            overflow-y: scroll;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="scroll-container" id="scrollContainer">
        滚动此容器以触发滚轮事件
    </div>

    <script>
        // 获取滚动容器元素
        const scrollContainer = document.getElementById('scrollContainer');

        // 定义滚轮事件处理函数
        function handleWheel(event) {
            // 阻止默认行为，如浏览器自带的滚动效果
            event.preventDefault();

            // 获取滚轮的方向和距离
            const deltaY = event.deltaY;

            // 根据滚轮方向和距离执行相应操作
            if (deltaY > 0) {
                console.log('向上滚动');
            } else {
                console.log('向下滚动');
            }
        }

        // 为滚动容器添加滚轮事件监听器
        scrollContainer.addEventListener('wheel', handleWheel);
    </script>
</body>
</html>

在这个示例中，我们创建了一个名为scrollContainer的可滚动容器。当用户在容器内滚动时，handleWheel函数会被调用。这个函数会阻止浏览器的默认滚动行为，并根据滚轮的方向（向上或向下）执行相应的操作。

0 赞

0 踩