如果有业务需求：使用横向滚动，而又不想用滚动条，可以使用横向拖拽滚动，主要是利用元素的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内容横向拖拽滚动
原文地址：https://www.cnblogs.com/jkingdom/p/9275004.html