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

Question

我有一个高度为 1200 像素、宽度为浏览器窗口的 div。在那个 div 的正下方，我有另一个高度为 1000px 的 div。现在向下滚动时，您将能够滚动到第二个 div 的末尾。我想要的是设置滚动高度，例如我想说你应该只能滚动 1200 像素。这样访问者就看不到我的第二个 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;
}