html5tab横向滚动,⽆滚动条（transform：translate）
html5 横向滚动，⽤到了 touchstart、touchmove、touchend 控制修改transform：translate属性;[⼿机端或者浏览器模拟⼿机模式才有效果]
【转载请注明出处】
回头准备封装成插件都放到 github上
html：
<div class="tab" id="tab">
<div class="scroll-tab" id="scroll_tab" >
<a href="#" class="active">tab1</a>
<a href="#">tab2</a>
<a href="#">tab3</a>
<a href="#">tab4</a>
<a href="#">tab5</a>
<a href="#">tab6</a>
<a href="#">tab7</a>
<a href="#">tab8</a>
</div>
</div>
css：
.tab{overflow: hidden;width: 90%;margin: 0 auto;}
.scroll-tab{display: flex;position: relative;}
.scroll-tab a{padding: 5px 10px;border-bottom: 2px solid transparent;text-decoration: none;color: #333333;font-size: 16px;font-family: "arial, helvetica, sans-serif","微软雅⿊";} .scroll-tab a.active{color: #0894ec;border-color: #0894ec;}
js:
var $scrollTab;
var $ElementById("tab");
var touchstartX, touchstartY;
var scrollMax;
var mX,mY;
var moveto;
$tab.addEventListener('touchstart', function (e) {
var touch = e.targetTouches[0];
touchstartX = touch.pageX;
touchstartY = touch.pageY;
$ElementById("scroll_tab");
scrollMax = $scrollTab.scrollWidth - $tab.clientWidth;
});
$tab.addEventListener('touchmove', function (e) {
var touch = e.targetTouches[0];
mX = touch.pageX;
mY = touch.pageY;
if (touchstartY - mY <= 15 && touchstartY - mY >= -15) {
var transform = $ansform;
transform = place("translate(", "");
var currentX = Number(transform.substring(0, (transform.indexOf(",") - 2)));
moveto = -(touchstartX - mX)/4.8;
moveto = moveto + currentX;
if (moveto <= (100) && moveto >= (-scrollMax - 100)) {
$ansform="translate(" + moveto + "px, 0px) translateZ(0px)";
}
}
});
$tab.addEventListener('touchend', function (e) {
$ansitionDuration="600ms";
if (moveto > 0) {
$ansform="translate(0px, 0px) translateZ(0px)";
} else if (moveto < (-scrollMax)) {
$ansform="translate(" + (-scrollMax) + "px, 0px) translateZ(0px)";
}
setTimeout(function () {
$ansitionDuration="0ms";
}, 600);
});html横向滚动条样式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。