如果您想插件实现，如下链接：better-scroll

better-scroll | :scroll: inspired by iscroll, and it supports more features and has a better scroll perfermance

base-scroll | BetterScroll 2.0

我们都知道，pc端的横向滚动条只能点击滚动条进行左右拖动，不能像移动端那样，直接在空白区域就可以左右拖动。

在我的项目中，因为需求是将整个网站的滚动条全部隐藏了，所以就不能点击滚动条来拖动。

效果图1：

 效果图2：

 效果图1代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width:400px;
            overflow: auto;
            white-space: nowrap;
            background: #eee;
            border:5px solid #aaa;
        }
        .box>span{
            display: inline-block;
            height:100px;
        }
         /* H5的时候，隐藏滚动条 */
        ::-webkit-scrollbar {
            display: none;  
            width: 0 !important;  
            height: 0 !important;  
            -webkit-appearance: none;  
            background: transparent;  
        }
        /*禁止复制*/
        .no_copy{
            moz-user-select: -moz-none;
            -moz-user-select: none;
            -o-user-select:none;
            -khtml-user-select:none;
            -webkit-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }

    </style>
</head>
<body>
    <h1>按住拖动时，移出元素依然可以再拖动</h1>
    <div class="box no_copy">
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
    </div>
</body>
</html>
<script src="./jquery.3.2.1.min.js"></script>
<script>
    /**
 * 拖动内容，滚动条滚动，横向
 * @param {string} container 需要拖动的面板
 */
function dragMoveX(container) {
    var flag;
    var downX;
    var scrollLeft;
    //鼠标按下
    $(document.body).on("mousedown", container, function (event) {
        console.log('mousedown')
        flag = true;
        downX = event.clientX;
        scrollLeft = $(this).scrollLeft();
    });
    //鼠标移动
    $(document).on("mousemove", function (event) {
        console.log('mousemove',flag,event.clientX)
        if (flag) {
            var moveX = event.clientX;
            var scrollX = moveX - downX;
            // console.log("moveX" + moveX);
            // console.log("scrollX" + scrollX);
            if (scrollX < 0 && scrollLeft > 0) {
                $(container).scrollLeft(scrollLeft - scrollX)
            }
            else {
                $(container).scrollLeft(scrollLeft - scrollX)
            }
        }
    });
    //鼠标释放
    $(document).on("mouseup", function () {
        console.log('mouseup')
        flag = false;
    });
    /**
     * 注意：与 mouseout 事件不同，mouseleave 事件只有在鼠标指针离开被选元素时被触发，mouseout 事件在鼠标指针离开任意子元素时也会被触发。参见页面底部演示实例。
     * 所以：如果mouseout的子元素存在溢出，并添加了超出加滚动，那么刚进入也会触发该事件，所以这里就不能使用。
     * */
    //鼠标移出元素
    $(container).on("mouseleave", function (event) {
        console.log('mouseleave',event.pageX,document.body.offsetWidth)
        // flag = false;
        if (event.pageX < 0 || event.pageX > document.body.offsetWidth) {
            console.log('在元素上移出')
            flag = false;
        }         
    });
}

dragMoveX(".box");
</script>

 效果图2代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width:400px;
            overflow: auto;
            white-space: nowrap;
            background: #eee;
            border:5px solid #aaa;
        }
        .box>span{
            display: inline-block;
            height:100px;
        }
         /* H5的时候，隐藏滚动条 */
        ::-webkit-scrollbar {
            display: none;  
            width: 0 !important;  
            height: 0 !important;  
            -webkit-appearance: none;  
            background: transparent;  
        }
        /*禁止复制*/
        .no_copy{
            moz-user-select: -moz-none;
            -moz-user-select: none;
            -o-user-select:none;
            -khtml-user-select:none;
            -webkit-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }

    </style>
</head>
<body>
    <h1>按住拖动时，移出元素不能再拖动</h1>
    <div class="box no_copy">
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
        <span>我是横向滚动内容</span>
    </div>
</body>
</html>
<script src="./jquery.3.2.1.min.js"></script>
<script>
    /**
 * 拖动内容，滚动条滚动，横向
 * @param {string} container 需要拖动的面板
 */
function dragMoveX(container) {
    var flag;
    var downX;
    var scrollLeft;
    //鼠标按下
    $(document.body).on("mousedown", container, function (event) {
        console.log('mousedown')
        flag = true;
        downX = event.clientX;
        scrollLeft = $(this).scrollLeft();
    });
    //鼠标移动
    $(container).on("mousemove", function (event) {
        console.log('mousemove',flag)
        if (flag) {
            var moveX = event.clientX;
            var scrollX = moveX - downX;
            // console.log("moveX" + moveX);
            // console.log("scrollX" + scrollX);
            if (scrollX < 0 && scrollLeft > 0) {
                $(this).scrollLeft(scrollLeft - scrollX)
            }
            else {
                $(this).scrollLeft(scrollLeft - scrollX)
            }
        }
    });
    //鼠标释放
    $(container).on("mouseup", function () {
        console.log('mouseup')
        flag = false;
    });
    /**
     * 注意：与 mouseout 事件不同，mouseleave 事件只有在鼠标指针离开被选元素时被触发，mouseout 事件在鼠标指针离开任意子元素时也会被触发。参见页面底部演示实例。
     * 所以：如果mouseout的子元素存在溢出，并添加了超出加滚动，那么刚进入也会触发该事件，所以这里就不能使用。
     * */
    //鼠标移出元素
    $(container).on("mouseleave", function (event) {
        console.log('mouseleave',event.pageX,document.body.offsetWidth)
        flag = false;
        if (event.pageX < 0 || event.pageX > document.body.offsetWidth) {
            console.log('在元素上移出')
            flag = false;
        }         
    });
}

dragMoveX(".box");
</script>

vue项目使用：

/**
 * 横向拖动触发滚动条拖动
 * container：jquery选择器
 */
export function dragMoveX(container) {
    var flag;
    var downX;
    var scrollLeft;
    //鼠标按下
    $(document.body).on("mousedown", container, function (event) {
        // console.log('mousedown')
        flag = true;
        downX = event.clientX;
        scrollLeft = $(this).scrollLeft();
    });
    //鼠标移动
    $(document).on("mousemove", function (event) {
        // console.log('mousemove')
        if (flag) {
            var moveX = event.clientX;
            var scrollX = moveX - downX;
            // console.log("moveX" + moveX);
            // console.log("scrollX" + scrollX);
            if (scrollX < 0 && scrollLeft > 0) {
                $(container).scrollLeft(scrollLeft - scrollX)
            }
            else {
                $(container).scrollLeft(scrollLeft - scrollX)
            }
        }
    });
    //鼠标释放
    $(document).on("mouseup", function () {
        // console.log('mouseup')
        flag = false;
    });
    /**
     * 注意：与 mouseout 事件不同，mouseleave 事件只有在鼠标指针离开被选元素时被触发，mouseout 事件在鼠标指针离开任意子元素时也会被触发。参见页面底部演示实例。
     * 所以：如果mouseout的子元素存在溢出，并添加了超出加滚动，那么刚进入也会触发该事件，所以这里就不能使用。
     * */
    //鼠标移出元素
    $(container).on("mouseleave", function (event) {
        // console.log('mouseleave')
        if (event.pageX < 0 || event.pageX > document.body.offsetWidth) {
            flag = false;
        }         
    });
}

# html5 # html # python
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

Redis开源社区持续壮大，华为云为Valkey项目注入新的活力

avatar 华为云开发者联盟
cover

Python文本统计与分析：从基础到进阶

avatar 华为云开发者联盟
cover

教你用Perl实现Smgp协议

avatar 华为云开发者联盟