var isOnScrollbar;
document.onmousedown=function(e){
e=e||window.event;
var bar=getScrollbar();
if(e.clientX>bar.left){
isOnScrollbar=true;
document.title='mousedown on scroll bar';
}
}
我们发现这段代码可以在IE FF下正常运行,接下来注册mouseup
document.onmouseup=function(e){
if(isOnScrollbar){
document.title='mousedup';
}else{
document.title='mousedup on body';
}
isOnScrollbar=false;
}
网页内容区域自动滚动,滚动条会随着内容的增加自动往下滚动。
当用户鼠标在滚动条上按下的时候,我们可以假设他(她)正在浏览聊天内容,那么这个时候好的用户体验就不能让滚动条再自动滚动了。
为了实现这个功能,可能大家首先会想到的就是mouse down 和 mouse up事件了。
嗯,我们可以利用它,我们还要识别滚动条的宽度及最左侧的位置,于是我们有了这样的一个方法:
getScrollbar获取滚动条左侧位置,及滚动条的宽度,接下来我们要注册onmousedown事件,我们注册在document上
我们发现这段代码可以在IE FF下正常运行,接下来注册mouseup
发现除IE外其它浏览器都可以正常工作,IE不行,尝试跟踪mousemove事件:
发现鼠标在滚动条上按下后移动,mousemove是不触发的,而其它浏览器是正常触发,猜测IE在拖动滚动条开始时
setCapture了,导致其它事件不能正常运行,不过发现鼠标在mouseup后,mousemove会触发一次,我们可以利用这个
来hack IE下的问题
最终的测试如下:
本例只是抛砖引玉,只提供一个简单的思路,没有严格的测试,也许在其它浏览器下有问题,欢迎留言交流