Javascript 禁用页面滚动直到用户滚动300像素？

我想禁用页面的垂直滚动，直到用户已经滚动了300px，如果它没有被禁用，这是可能的，我怎么做呢？可以在jquery中完成吗？

您需要使用css和javascript滚动事件监听器。 你玩你的主要div css定位

$(document).scroll(function(){
    if( $('.page').css('position')=="fixed" && $(document).scrollTop()>300 ){
        $('.page').css('position','static');
    }else if($('.page').css('position')!="fixed" && $(document).scrollTop()<=300){
        $('.page').css('position','fixed');
    }
})

如果有帮助，请选中此选项：

还有动画：

---

这是一个棘手的问题。以下是实现这一目标的一种方法：

注意：我没有测试跨浏览器兼容性

CSS:

JS:

基本上，我听的是滚动事件。在scroll上，我将主体的顶部位置设置为scroll位置，使其看起来好像内容没有滚动。我还将此限制为最大300像素，因此一旦通过该点，内容将正常滚动

编辑：替代解决方案

在此版本中，您必须将内容包装在单独的div中

CSS:

JS:

---

您需要使用javascript来实现这一点，通过收听scroll jQuery可以使这一点变得简单。比如说滚动被禁用了，但是用户用鼠标键向下滚动相当于300px，然后重新启用滚动。因此页面不会移动第一个300px的滚动。按下并拖动鼠标滚轮滚动是同一件事还是不同？不知道这怎么不清楚我得到了两个解决问题的可靠答案这是我的第一个想法，但是当你滚动到300像素时，这会导致300像素的跳跃。你可以使用一些动画：谢谢大家，当我再获得6次重复时，我会给每个人打上一个有用的分数！

body { position: relative; }

$(function () {
  $(document).scroll(function (event) {
    var offset = $(window).scrollTop();
    $(document.body).css('top', Math.min(300, offset));
  });
});

.content {
    position: relative;
    top: 300px;
}
.content.fixed {
    position: fixed;
    top: 0;
}

$(function () {
    var $doc = $(document),
        $content = $doc.find('.content');
    //-- set body size to match content
    $doc.find('body').css({ minHeight: $content.outerHeight() });
    //-- wire up scroll event
    $doc.on('scroll', updateContent);
    function updateContent () {
        var top = $doc.scrollTop();
        if (top < 300) {
            $content.addClass('fixed');
        } else {
            $content.removeClass('fixed');
        }
    }
    //-- run update method on page load
    updateContent();
});