jquery - スクロールの高さを動的に設定するには?

Question

高さ1200px、ブラウザウィンドウの幅を持つdivがあります。その div のすぐ下に、高さ 1000px の別の div があります。下にスクロールすると、2 番目の div の終わりまでスクロールできるようになります。私が望むのは、スクロールの高さを設定することです。たとえば、スクロールできるのは 1200px だけです。そうすれば、2 番目の div が訪問者に表示されなくなります。JQueryでこれを達成する方法はありますか?

私の問題を強調する写真をアップロードしました：

Answer 1

を処理window.onscrollし、ユーザーがスクロールしすぎた場合にイベントが伝播するのを防ぎ、本来見るべき場所に戻すことができます。

jsフィドル

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;
}