如何動態設置滾動高度？

Question

我有一個div，其高度為1200px，瀏覽器窗口的寬度為。 在該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;
}