首页 > 代码库 > html5 横向滚动,无滚动条（transform：translate）
html5 横向滚动,无滚动条（transform：translate）
html5 横向滚动，用到了 touchstart、touchmove、touchend 控制修改transform：translate属性;[手机端或者浏览器模拟手机模式才有效果]
【转载请注明出处】
回头准备封装成插件都放到 github上 https://github.com/wt9213
html：
<div class="tab" id="tab"> <div class="scroll-tab" id="scroll_tab" style="transform: translate(0px, 0px) translateZ(0px);"> <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 $tab=document.getElementById("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; $scrollTab=document.getElementById("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 = $scrollTab.style.transform; transform = transform.replace("translate(", ""); var currentX = Number(transform.substring(0, (transform.indexOf(",") - 2))); moveto = -(touchstartX - mX)/4.8; moveto = moveto + currentX; if (moveto <= (100) && moveto >= (-scrollMax - 100)) { $scrollTab.style.transform="translate(" + moveto + "px, 0px) translateZ(0px)"; } } }); $tab.addEventListener(‘touchend‘, function (e) { $scrollTab.style.transitionDuration="600ms"; if (moveto > 0) { $scrollTab.style.transform="translate(0px, 0px) translateZ(0px)"; } else if (moveto < (-scrollMax)) { $scrollTab.style.transform="translate(" + (-scrollMax) + "px, 0px) translateZ(0px)"; } setTimeout(function () { $scrollTab.style.transitionDuration="0ms"; }, 600); });
html5 横向滚动,无滚动条（transform：translate）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。