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

需要做水平触摸滑动的效果，但是因为是一个公众号内嵌网页，不想引用插件或者有太多的代码，就想着用浏览器自带的滚动条达到所期望的效果，结构及兼容优化如下：

Question：

（1）实现水平滑动

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

1. HTML结构

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

2. CSS样式（概要）

    .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;
            }
        }
    }

3.  js使滚动条滚动到指定的位置

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