需要做水平触摸滑动的效果,但是因为是一个公众号内嵌网页,不想引用插件或者有太多的代码,就想着用浏览器自带的滚动条达到所期望的效果,结构及兼容优化如下:
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()可以获取或者设置滚动条滚动的距离