如何动态设置滚动高度？

Question

我有一个高度为1200像素且浏览器窗口宽度的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;
}