jquery - 如何动态设置滚动高度？

Question

我有一个高度为 1200px 和浏览器窗口宽度的 div。就在该 div 下方，我有另一个高度为 1000px 的 div。现在向下滚动时，您将能够滚动到第二个 div 的末尾。我想要的是设置滚动高度，所以例如我想说你应该只能滚动 1200px。这样我的第二个 div 就不会对访问者可见。有什么方法可以用 JQuery 实现这一点吗？

我上传了一张强调我的问题的图片：

Answer 1

如果用户滚动得太远，您可以处理window.onscroll，防止事件传播并将它们发送回他们要查看的位置：

jsFiddle

window.onscroll = function (e) {
    var maxViewableHeight = 1400;
    if (document.body.scrollTop + window.innerHeight > maxViewableHeight) {
    console.log(document.body.scrollTop + window.innerHeight);
        e.preventDefault;
        document.body.scrollTop = maxViewableHeight - window.innerHeight;
        return false;
    }
}

更新

这是一个对跨浏览器更友好的版本，在 Chrome 25、Firefox 19、IE10/IE9、Safari 5、Opera 12 中进行了测试。在 IE、Safari 和 Opera 中它有点反弹。尤其是 Opera，因为它华丽的平滑滚动，让我更加欣赏 Firefox，因为它具有平滑的滚动并且非常完美。

window.onscroll = function (e) {
    var maxViewableHeight = 1400,
        scrollTop = getScrollTop();
    if (scrollTop + window.innerHeight > maxViewableHeight) {
        e.preventDefault();
        window.scrollTo(0, maxViewableHeight - window.innerHeight);
        return false;
    }
}

function getScrollTop() {
    if (typeof window.pageYOffset !== 'undefined') {
        return window.pageYOffset;
    }
    var body = document.body,
        docElement = document.documentElement;
    docElement = (docElement.clientHeight) ? docElement : body;
    return docElement.scrollTop;
}