转载

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

正文到此结束

所属分类：编程技术

本文标签： ip 代码测试 GitHub java 管理 CSS JavaScript tar http client https Document git HTML
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二