转载

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

原文  https://segmentfault.com/a/1190000006146131
正文到此结束
Loading...