Question

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

有什么建议吗？

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


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

Answer 1

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

更新

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

Answer 2

在$("#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>

如何在div上锁定滚动

2 个答案: