Question

我想创建一个很长的单一网页，并通过一个明显的“锁定”来突出显示网页的各个部分。当用户滚动时感觉到。当该部分到达顶部并占据完整显示时，它应该禁用滚动，然后当用户再次滚动时，它应该释放并允许它们在再次重复锁定之前继续到下一部分。

我环顾四周，找不到我要找的东西。

任何有关解决方案或方法的建议都将受到赞赏。谢谢！

Answer 1

浏览器的默认行为是滚动。为了防止这种情况，您可以使用jQuery＆＃39; preventDefault。

$(document).on("scroll touchmove mousewheel", function(event) {
    event.preventDefault();
    event.stopPropogation();
    return false;
});

$(document.body).on("keypress", function(event) {
    if (event.which === 34 || event.which === 41) {
        event.preventDefault();
        return false;
    }
});

Answer 2

好。我会为这样的身体做overflow: hidden;：

$(function () {
  $(window).scroll(function () {
    if ($(window).scrollTop() > 500 && $(window).scrollTop() < 750)
      $("body").addClass("ovh");
  });
  $("a").click(function () {
    $(".ovh").removeClass("ovh");
    return false;
  });
});

* {font: 10pt 'Segoe UI';}
.ovh {overflow: hidden;}
p.middle {margin-top: 750px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Body stops scrolling when the next text comes in.</p>
<p class="middle">Body stops scrolling here. <a href="#">Click</a> to release.</p>
<p class="middle">Some space</p>

如何在长而单一的网页上临时锁定滚动

2 个答案: