利用滚动条进行移动端水平滑动

Question：

（1）实现水平滑动

（2）滚动条滚动，自动显示 li.active 项所在的位置

 

<div class="scroll_hide">
<div id="machine_box">
<ul id="machine_list">
 <li class="machine_items">
<p class="machine_no">A1</p>
        <p class="machine_ad">区域</p>
</li>
<!-- ……省略多个li标签 -->
<li class="machine_items active">
<p class="machine_no">A5</p>
<p class="machine_ad">区域</p>
</li>
</ul>
</div>
</div>

.scroll_hide {
        // 用来隐藏滚动条，盒子高度小于有滚动条的盒子高度，形成滚动条被隐藏的假象
width: 100%;
height: 90px;
overflow: hidden;
}
.machine_box {
width: 100%;
height: 105px;
        // 横向滚动，纵向隐藏
overflow-y: hidden;
overflow-x: auto;
position: relative;
        // 隐藏滚动条，经测验在ios的微信浏览器上无效，滚动条还会显示
&::-webkit-scrollbar {
display: none;
}
.machine_lists {
height: 90px;
width: 1470px;
.machine_items {
position: relative;
width: 180px;
height: 90px;
float: left;
margin-right: 30px;
}
}
}

 var clientWidth=document.body.clientWidth||document.documentElement.clientWidth;
    var x =  $("li.active").offset().left - $("li.active").width();
//    console.log($(window).width);
    console.log(clientWidth);
    console.log($("li.active").offset().left);
    console.log($("li.active").width());
    console.log(x);
    $("#machine_box").scrollLeft(x);

 

var x = $(window).width - $("li.active").offset().left - $("li.active").width();
$("#machine_box").scrollLeft(x);
// 给可滚动元素的父元素添加scrollLeft()可以获取或者设置滚动条滚动的距离