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

Question

我有一个575px高的标题区域。当用户移动滚动条或使用鼠标滚轮时，我想让这个头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; 
    } 
} 

相当的hackish，但...我所以希望这不是广告的新品种......