jquery禁止鼠标滚动

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，你可以很容易地操作 DOM 元素，绑定事件处理器等。

类型

事件处理：绑定和解绑事件处理器。
DOM 操作：创建、修改和删除 DOM 元素。
动画效果：实现平滑的动画效果。
Ajax 交互：简化与服务器的数据交换。

应用场景

网页交互：实现复杂的用户交互效果。
数据展示：动态加载和展示数据。
表单验证：在前端进行表单验证。

问题描述

如何使用 jQuery 禁止鼠标滚动？

原因

用户可能希望在某些特定情况下禁止页面的滚动，例如弹出层显示时，防止用户通过滚动页面来关闭弹出层。

解决方案

可以通过监听 wheel 和 touchmove 事件，并阻止它们的默认行为来实现禁止鼠标滚动。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>禁止鼠标滚动</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .no-scroll {
            overflow: hidden;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="content">
        <!-- 页面内容 -->
        <p>这是一个示例页面。</p>
    </div>
    <button id="disable-scroll">禁止滚动</button>
    <button id="enable-scroll">允许滚动</button>

    <script>
        $(document).ready(function() {
            var $body = $('body');
            var $disableScrollBtn = $('#disable-scroll');
            var $enableScrollBtn = $('#enable-scroll');

            $disableScrollBtn.on('click', function() {
                $body.addClass('no-scroll');
                $(document).on('wheel', preventDefault);
                $(document).on('touchmove', preventDefault);
            });

            $enableScrollBtn.on('click', function() {
                $body.removeClass('no-scroll');
                $(document).off('wheel', preventDefault);
                $(document).off('touchmove', preventDefault);
            });

            function preventDefault(e) {
                e.preventDefault();
            }
        });
    </script>
</body>
</html>

解释

CSS 部分：定义了一个 .no-scroll 类，用于设置 body 的 overflow 属性为 hidden，并设置高度为 100%，以禁止滚动。
JavaScript 部分：
- 使用 jQuery 绑定按钮点击事件。
- 当点击“禁止滚动”按钮时，给 body 添加 .no-scroll 类，并绑定 wheel 和 touchmove 事件的 preventDefault 函数。
- 当点击“允许滚动”按钮时，移除 body 的 .no-scroll 类，并解绑 wheel 和 touchmove 事件的 preventDefault 函数。