jQuery内容横向拖拽滚动

Posted jkingdom

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery内容横向拖拽滚动相关的知识,希望对你有一定的参考价值。

如果有业务需求:使用横向滚动,而又不想用滚动条,可以使用横向拖拽滚动,主要是利用元素的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>

  

以上是关于jQuery内容横向拖拽滚动的主要内容,如果未能解决你的问题,请参考以下文章

jQuery实现div横向拖拽排序

c# winform scroll 滚动条 滚动到底

JS或者Jquery如何取得横向和纵向滚动条的最大可以滚动的值?

jQuery实现文字横向滚动效果

jQuery 平滑滚动片段以不同的速度工作

几条jQuery代码片段助力Web开发效率提升