html5 横向滚动,无滚动条（transform：translate）

Posted 2020-08-05 为师灭了你

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