利用jquery禁止外层滚动条的滚动

禁止外层滚动条的滚动非常常见，可以通过jQuery实现。以下是具体步骤：

准备工作

首先，在HTML页面中需要有一个包含需要禁止滚动条的元素容器，例如：

<div class="container">
  <div class="content">
    <!-- 页面内容 -->
  </div>
</div>

其中，container为外层容器，content为内层内容容器。

通过CSS设置容器高度和溢出属性

接下来，需要通过CSS设置外层容器的高度和溢出属性，使其固定高度，以及超出时隐藏内容并产生滚动条。示例代码如下：

.container {
  height: 300px; /* 固定高度 */
  overflow-y: auto; /* 产生纵向滚动条 */
}

通过JavaScript禁止外层滚动条滚动

最后，需要使用JavaScript禁止外层容器的滚动事件，使滚动条无法滚动。示例代码如下：

$('.container').on('mousewheel DOMMouseScroll', function(e) {
  var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
  if ($(this).height() < this.scrollHeight || delta > 0 && $(this).scrollTop() === 0 || delta < 0 && $(this).scrollTop() === this.scrollHeight - $(this).height()) {
    e.preventDefault();
  }
});

这段代码使用了on方法来绑定外层容器的滚动事件，其中mousewheel和DOMMouseScroll为不同浏览器的滚轮事件名称。当外层容器的高度小于其内部内容高度时，且滚动位置已经在顶部或底部时，禁止滚动事件的默认行为，即禁止滚动条滚动。

示例说明

示例一

假设现在我们需要禁止整个页面的滚动条滚动，而只允许内部某个具体区域滚动，例如：

<!DOCTYPE html>
<html>
<head>
  <title>禁止外层滚动条滚动</title>
  <meta charset="utf-8">
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
    }
    .container {
      height: 300px;
      overflow-y: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">
      <!-- 此处是需要滚动的内容区域 -->
      <p>这是第一段内容</p>
      <p>这是第二段内容</p>
      <p>这是第三段内容</p>
      <p>这是第四段内容</p>
      <p>这是第五段内容</p>
      <p>这是第六段内容</p>
      <p>这是第七段内容</p>
      <p>这是第八段内容</p>
      <p>这是第九段内容</p>
      <p>这是第十段内容</p>
    </div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript">
    $('.container').on('mousewheel DOMMouseScroll', function(e) {
      var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
      if ($(this).height() < this.scrollHeight || delta > 0 && $(this).scrollTop() === 0 || delta < 0 && $(this).scrollTop() === this.scrollHeight - $(this).height()) {
        e.preventDefault();
      }
    });
  </script>
</body>
</html>

在这个例子中，我们给整个页面添加了一个滚动条，但只允许.container区域内的内容滚动，外层元素禁止滚动。

示例二

假设现在我们需要在网页中添加一个模态框，需要禁止背后内容区域的滚动条滚动，而只允许模态框内部的内容滚动，例如：

<!DOCTYPE html>
<html>
<head>
  <title>禁止外层滚动条滚动 - 模态框示例</title>
  <meta charset="utf-8">
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
    }
    .modal-overlay {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }
    .modal {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      height: 200px;
      overflow-y: auto;
      background-color: #fff;
      z-index: 1000;
      padding: 16px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>禁止外层滚动条滚动 - 模态框示例</h1>
    <p>背后可以滚动的内容区域</p>
    <p>背后可以滚动的内容区域</p>
    <p>背后可以滚动的内容区域</p>
    <p>背后可以滚动的内容区域</p>
    <p>背后可以滚动的内容区域</p>
    <div class="modal-overlay">
      <div class="modal">
        <h2>模态框标题</h2>
        <p>模态框内可以滚动的内容区域</p>
        <p>模态框内可以滚动的内容区域</p>
        <p>模态框内可以滚动的内容区域</p>
        <p>模态框内可以滚动的内容区域</p>
        <p>模态框内可以滚动的内容区域</p>
      </div>
    </div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript">
    $('.modal-overlay').on('mousewheel DOMMouseScroll', function(e) {
      var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
      if ($(this).height() < this.scrollHeight || delta > 0 && $(this).scrollTop() === 0 || delta < 0 && $(this).scrollTop() === this.scrollHeight - $(this).height()) {
        e.preventDefault();
      }
    });
  </script>
</body>
</html>

在这个例子中，我们添加了一个位于页面正中间的模态框，并且禁止了背后内容区域的滚动条滚动，只允许模态框内部的内容滚动。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：利用jquery禁止外层滚动条的滚动 - Python技术站

利用jquery禁止外层滚动条的滚动

准备工作

通过CSS设置容器高度和溢出属性

通过JavaScript禁止外层滚动条滚动

示例说明

示例一

示例二

相关文章