jquery实现一个不显示滚动条的左右拖拽容器内内容效果代码-html代码-BFW代码库

jquery实现一个不显示滚动条的左右拖拽容器内内容效果代码

代码语言：html

所属分类：拖放

代码描述：jquery实现一个不显示滚动条的左右拖拽容器内内容效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!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>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script>
    /**
 * 拖动内容，滚动条滚动，横向
 * @param {string} container 需要拖动的面板
 */
function dragMoveX(container) {
    var flag;
    var downX;
    var scrollLeft;
    //鼠标按下
    $(document.body).on.........完整代码请登录后点击上方下载按钮下载查看