jquery content Horizontal Drag-and-drop scrolling

If there is a business need: use horizontal scrolling, but do not want to use the scroll bar, you can use the horizontal drag-and-drop scrolling, mainly using the element's scrollleft characteristics;

Nonsense not much to say directly on the code;

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 structure:

<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" >pers on5</a> <a class= "Mumber" >person6</a> <a class= "Mumber" >person7</a> &lt ; a class= "Mumber" >person8</a> <a class= "Mumber" >person9</a> <a class= "Mumber" >per        son10</a> <a class= "Mumber" >person11</a> <a class= "Mumber" >person12</a> <a class= "Mumber" >person13</a> <a class= "Mumber" >person14</a> <a class= "Mumber" &        gt;person15</a> <a class= "Mumber" >person16</a> <a class= "Mumber" >person17</a> <a class= "Mumber" >person18</a> <a class= "Mumber" >person19</a> <a class= "Mu Mber ">person20</a&Gt　　 <a class= "Mumber" >person21</a> <a class= "Mumber" >person22</a> </div></div>

jquery Code

<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.leng        Th, boxcontainerwidth = mumberwidth*length;        Boxcontainer.css (' width ', boxcontainerwidth);        When the outer container width is greater than the inner container width, return to False if (parseint (boxwidth) >=parseint (boxcontainerwidth)) directly; Boxcontainer.on (' MouseDown ', function (e) {var PosX = e.screenx;//mouse click position $ (document). On (' MouseMove ')                    , function (e) {var posl = e.clientx,//The position of the mouse after scrolling MoveX = posl-posx,//mouse Drag distance                Currentscroll = Box.scrollleft ();//Current scrollleft value currentscroll + = MoveX;        Box.scrollleft (Currentscroll)})//emptying event    $ (document). On (' MouseUp ', function () {$ (this). Unbind (); })}) </script>

　　

jquery content Horizontal Drag-and-drop scrolling