识别滚动条上的mousedown mouseup事件

转载请注明出处：https://github.com/xinglie/xi...

网页内容区域自动滚动，滚动条会随着内容的增加自动往下滚动。

当用户鼠标在滚动条上按下的时候，我们可以假设他（她）正在浏览聊天内容，那么这个时候好的用户体验就不能让滚动条再自动滚动了。

为了实现这个功能，可能大家首先会想到的就是mouse down 和 mouse up事件了。

嗯，我们可以利用它，我们还要识别滚动条的宽度及最左侧的位置，于是我们有了这样的一个方法：

var getScrollbar=function(){
var e=document.documentElement,
ow=e.offsetWidth,
cw=e.clientWidth;

return {//需要识别滚动条是在左面还是右面，目前没做处理，简单示例    left:cw,    width:ow-cw}

}
getScrollbar获取滚动条左侧位置，及滚动条的宽度，接下来我们要注册onmousedown事件，我们注册在document上

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;
}
发现除IE外其它浏览器都可以正常工作，IE不行，尝试跟踪mousemove事件：

document.onmousemove=function(){
window.status=new Date().getTime();
}
发现鼠标在滚动条上按下后移动,mousemove是不触发的，而其它浏览器是正常触发，猜测IE在拖动滚动条开始时

setCapture了，导致其它事件不能正常运行，不过发现鼠标在mouseup后，mousemove会触发一次，我们可以利用这个

来hack IE下的问题

if(document.attachEvent){
document.onmousemove=function(){
if(isOnScrollbar){
isOnScrollbar=false;
document.title='mousedup';
}
}
}
最终的测试如下：

aa    body    {        height: 2000px;    }

var getScrollbar=function(){
var e=document.documentElement,
ow=e.offsetWidth,
cw=e.clientWidth;
return {
left:cw,
width:ow-cw
}
}
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';
}
}
if(document.attachEvent){
document.onmousemove=function(){
if(isOnScrollbar){
isOnScrollbar=false;
document.title='mousedup';
}
}
}
document.onmouseup=function(e){
if(isOnScrollbar){
document.title='mousedup';
}else{
document.title='mousedup on body';
}
isOnScrollbar=false;
alert('up');
}

本例只是抛砖引玉，只提供一个简单的思路，没有严格的测试，也许在其它浏览器下有问题，欢迎留言交流

欢迎试用magix，区块化管理利器 https://github.com/thx/magix/...
magix https://github.com/thx/magix
欢迎star与fork

关键字：JavaScript, 前端, 用户体验, document

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！