如何在 div 上锁定滚动

我想创建一个具有锁定滚动功能的div，以便"向下滚动"的唯一方法是单击向下滚动 #middlediv的div。我还希望用户只能通过单击 .updiv 向上滚动 #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');
});

在 $("#top").click 和 $(".up").click 上添加了一些逻辑来设置body scrollable或hidden。还需要show/hide $("#top")div 才能准确工作。最初设置为$('body').css("overflow", "hidden");，因此最初不会滚动。

$("#top").click(function() {
  $('html,body').animate({
      scrollTop: $("#middle").offset().top
    },
    'slow');
  $('body').css("overflow", "initial");
  setTimeout(function () { $("#top").hide(); }, 1000);
});
$(".up").click(function() {
  $("#top").show();
  setTimeout(function() {
    $('html,body').animate({
        scrollTop: $("#top").offset().top
      },
      'slow');
    $('body').css("overflow", "hidden");
  }, 10);
});
$('body').css("overflow", "hidden");

#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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top">
  <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>

您需要禁用滚动，希望对您有所帮助

更新

使用 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>

相关内容

最新更新

热门标签：