请教控制滚动 div 的同时不滚动页面， 当 div 滚动到底部时同样不滚动页面！

[revir]

jsbin见： http://jsbin.com/racowa/1/
左边一栏可以滚动， 但是滚动到底后会导致整个页面都滚动。
我希望达到的效果是像 feedly 一样， http://feedly.com/#my ， 左边栏滚动到底时不能滚动整个页面， 只有当鼠标移出左边栏， 页面才能滚动。
该怎样办到呢？ 如果能借助 js 做到也行！
非常感谢！

[chairuosen]

让右侧内容也是内部滚动

[abelyao]

大概思路有两个：
思路一：当鼠标处于某 div 之内触发 scroll 事件的时候，判断是否已经滚动到底部，如果已经到底部了，就停止停止事件，可能还需要对事件的冒泡进行处理，防止继续触发 window 的 scroll 事件；
思路二：当触发 window 的 scroll 事件时，判断鼠标的位置是否在 div 之内，是的话则不停止 window 的 scroll 事件；
随便想到的，仅供参考。
如果到明天仍然没解决，我再写一个 demo 出来试试，现在要睡觉了 :)

[jsonline]

1. 不用试图阻止 scroll 事件的冒泡，你会后悔的。
2. 学会使用开发者工具查看别人网站的结构

[abelyao]

@revir 搜到一个解决方法：
http://segmentfault.com/q/1010000000095594/a-1020000000255451

[revir]

@abelyao

@chairuosen
@jsonline

多谢指教， 已经解决了。
这是我写的一个函数， 依赖 jQuery, 在chrome下测试通过：

```javascript
var soloWheel = function(element) {
window.onmousewheel = function(event) {
var el, h;
el = $(element)[0];
h = $(element).height();
if ($(element).has(event.srcElement).length || $(element).is(event.srcElement)) {
if (el.scrollTop < 5 && event.wheelDelta > 0) {
event.preventDefault();
}
if (el.scrollHeight - el.scrollTop - h < 5 && event.wheelDelta < 0) {
event.preventDefault();
}
}
};
};
```

jsbin 地址： http://jsbin.com/racowa/2/

[abelyao]

@revir 我根据那帖子做的，兼容 IE6 …
document.getElementById('side').onmousewheel = function(event) {
if (!event) event = window.event;
this.scrollTop = this.scrollTop - (event.wheelDelta ? event.wheelDelta : -event.detail * 10);
return false;
}

[revir]

@abelyao
你的方法确实比我的实现好多了！
谢谢~

[thanksmymagic]

@abelyao Hi~你好，我是笪兴，十年后（10years.me）的创始人。我刚刚看到你的回答和v2ex上的其他交流，感觉和我们的技术和团队风格都挺合拍 ，希望可以聊聊。十年后是一个基于梦想的社交网络，我们想用它让年轻人的生活更有未来性，网站是去年年末上线的。我们上个月刚拿到创新谷VC百万元天使轮融资，现在在招募Web前端开发的人才。可以加我的微信18101620531聊聊，交个朋友也不错：）