jQuery内容横向拖拽滚动

Posted 2020-12-02 jkingdom

如果有业务需求：使用横向滚动，而又不想用滚动条，可以使用横向拖拽滚动，主要是利用元素的scrollLeft特性；

废话不多说直接上代码；

css:

.box{
        width:100%;
        height:30px;
        line-height:30px;
        overflow:hidden;
    }
    .box-container{
        cursor: move;
        white-space:nowrap;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .box-container a.mumber {
        text-decoration:none;
        color:#333;
        padding:0 0 0 20px;
    }

html结构：

<div class="box">
    <div class="box-container">
        <a  class="mumber">person1</a>
        <a class="mumber">person2</a>
        <a class="mumber">person3</a>
        <a class="mumber">person5</a>
        <a class="mumber">person6</a>
        <a class="mumber">person7</a>
        <a class="mumber">person8</a>
        <a class="mumber">person9</a>
        <a class="mumber">person10</a>
        <a class="mumber">person11</a>
        <a class="mumber">person12</a>
        <a class="mumber">person13</a>
        <a class="mumber">person14</a>
        <a class="mumber">person15</a>
        <a class="mumber">person16</a>
        <a class="mumber">person17</a>
        <a class="mumber">person18</a>
        <a class="mumber">person19</a>
        <a class="mumber">person20</a>
        <a class="mumber">person21</a>
        <a class="mumber">person22</a>
    </div>
</div>　　

jquery代码　　

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function(){
        var boxContainer = $(‘.box .box-container‘),
            box = $(‘.box‘),
            boxWidth = box.width(),
            mumber = boxContainer.find(‘a.mumber‘),
            mumberWidth = mumber.width()+20,
            length = mumber.length,
            boxContainerWidth = mumberWidth*length;
        boxContainer.css(‘width‘,boxContainerWidth);
        //当外容器宽度大于内部容器宽度，直接返回
        if(parseInt(boxWidth)>=parseInt(boxContainerWidth))return false;
        boxContainer.on(‘mousedown‘,function(e){
            var posX = e.screenX;//鼠标点击时候的位置
            $(document).on(‘mousemove‘,function(e){
                var posL = e.clientX,//滚动后鼠标的位置
                    moveX = posL -posX,//鼠标拖动距离
                    currentScroll = box.scrollLeft();//当前的scrollLeft值
                currentScroll += moveX;
                box.scrollLeft( currentScroll)
            })
            //清空事件
            $(document).on(‘mouseup‘,function(){
                $(this).unbind();
            })
        })
    })

</script>