时间戳

首页 > 解决方案 > 如何锁定div的滚动

jquery - 如何锁定div的滚动

问题描述

我想创建一个锁定滚动的 div，以便“向下滚动”的唯一方法是单击向下滚动 #middle div 的 div。我还希望用户只能通过单击 .up div 来向上滚动#top，其余的 div 被锁定并且无法通过正常滚动访问

https://codepen.io/anon/pen/WPoNrw

有什么建议么？

 $("#top").click(function() {
$('html,body').animate({
    scrollTop: $("#middle").offset().top},
    'slow');
});


$(".up").click(function() {
$('html,body').animate({
    scrollTop: $("#top").offset().top},
    'slow');
});

标签： jquery

解决方案

你需要禁用滚动希望它会帮助你

更新

使用mouseout和onmouseover禁用特定的 div

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style type="text/css">
    #top {
      height: 1000px;
      background-color: pink;
    }
    
    #top:hover {
      cursor: url(""), auto;
    }
    
    #middle {
      height: 1000px;
      background-color: #add8e6;
    }
    
    #bottom {
      height: 1000px;
      background-color: #add8e6;
    }
    
    h1 {
      text-align: center;
      text-transform: uppercase;
      margin: 20px;
    }
    
    h2 {
      text-align: center;
      text-transform: uppercase;
      font-size: 1em;
    }
  </style>
</head>


<body>
  <div>
    <div id="top" onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';">
      <h1>top</h1>
    </div>

    <div id="middle">
      <h1>middle</h1>

      <div class="up">
        <h2>click me</h2>
      </div>
    </div>

    <div id="bottom">
      <h1>bottom</h1>
    </div>
  </div>
</body>
<script type="text/javascript">
  $("#top").click(function() {
    $('html,body').animate({
        scrollTop: $("#middle").offset().top
      },
      'slow');
  });


  $(".up").click(function() {
    $('html,body').animate({
        scrollTop: $("#top").offset().top
      },
      'slow');
  });
</script>

</html>

推荐阅读