jQuery - 防止用户向上滚动超过特定的滚动高度答案

【问题标题】：jQuery -- Prevent User from Scrolling Up Past Certain Scroll HeightjQuery - 防止用户向上滚动超过特定的滚动高度
【发布时间】：2017-05-09 06:29:28
【问题描述】：

我正在制作一个单页网站。

基本上，我有这个带有登陆图像和引导程序jumbotron 的动画登陆页面。我希望能够实现一个功能，一旦用户滚动到jumbotron 的末尾，用户就无法向上滚动以查看着陆图像和jumbotron。从某种意义上说，要么隐藏或删除顶部的<div>s，要么完全禁用滚动回这些点。

我找到了这段代码，但它会在页面加载时自动禁用向上滚动到页面顶部（200 像素之后）：

$(function() {
    var scrollPoint = 200;
    $(window).scroll(function() {
    $(window).scrollTop() < scrollPoint ? 
    $(window).scrollTop(scrollPoint) : '';
  }).scroll();
});

有什么想法吗？

【问题讨论】：

不要删除滚动功能，只需确保 body 内的父容器的最大高度为 200px 并隐藏溢出。因此，用户将无法访问低于它的任何内容。如果您禁用滚动，那么您还需要找到 scrollup 事件并再次启用它，这是很多工作
越过200px，也可以在滚动函数中调用event.preventDefault()
@harshit 我试过了，它什么也没做......

标签： javascript jquery css twitter-bootstrap-3

【解决方案1】：

您可以使用此代码隐藏 jumbotron。

$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('#id_of_jumbotron').offset().top + 
 $('#id_of_jumbotron').outerHeight() - window.innerHeight) {
    hideTheJumboTron();
}
});

【讨论】：

【解决方案2】：

试试这个：

$(function () {
    var scrollPoint = 200;
    $(window).scroll(function () {
        if ($(window).scrollTop() < scrollPoint) {
            console.log($(window).scrollTop());
            $(window).scrollTop(scrollPoint)
            return false;
        }
    }).scroll();
});

【讨论】：

是的，这实际上比我发现的方法更好，但是存在无法滚动到页面顶部的根本问题页面加载，和这是一个问题。我希望用户能够在页面加载时看到 jumbotron 及其上方的元素，但是一旦这些元素被滚动过去，我希望用户不能再向上滚动。
您可以在$(window).scrollTop() < scrollPoint 之后添加您的条件（比如isAllLoaded），一切都会好起来的@rehmanh