使用 jQuery，使用浏览器滚动条滚动 div 的内容，而不滚动页面...

Question

我的标题区域高 575 像素。我希望当用户移动滚动条或使用鼠标滚轮时，此 header div 的内容能够滚动，但是当滚动条到达该内容的末尾时，我需要整个窗口像平常一样开始滚动。

非常基本的示例代码：

<div id="header">

    <div id="text1">ONE</div>
    <div id="text2">TWO</div>
    <div id="text3">THREE</div>
    <div id="text4">FOUR</div>

</div>

<div id="main-content"></div>

我在这里设置了 JSfiddle：http://jsfiddle.net/3uefZ/5/

标题 div 上有滚动条 - 我不想要:( 但这是唯一可以接近可视化我的意思的方法。

我希望对此有任何帮助...

谢谢！

Answer 1

这可能有效：

http://jsfiddle.net/BbGdM/

var i = document.body.scrollTop;
var scrolling = true;
window.onscroll = function(){
    if(scrolling) {
        var old = document.getElementById("header").scrollTop
        document.getElementById("header").scrollTop += document.body.scrollTop;
        if( document.getElementById("header").scrollTop == old &&
            document.body.scrollTop > 0) {
            scrolling = false;
        }
        document.body.scrollTop = 0;
    }
}

但相当黑客......我非常希望这个不是新品种的广告……