识别滚动条上的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';
        }
    }
}

最终的测试如下：

<!doctype>
<html>
<head>
    <title>aa</title>
    <style type="text/css">
        body
        {
            height: 2000px;
        }
    </style>
</head>
<body>
</body>
</html>

<script type="text/javascript">
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');
}
</script>

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

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

识别滚动条上的mousedown mouseup事件

行列

引用和评论

可视化脚手架介绍

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合