辨认滚动条上的mousedown mouseup事宜

2024年5月21日 137次阅读 来源: 行列

转载请说明出处：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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞