h5页面在手机端禁用横向滚动

Posted 2023-04-12

参考技术A         公司项目需要用h5做移动端网站，其中有一个功能要用到侧边导航栏。

        在浏览器中模拟测试的时候直接使用html,bodyoverflow：hildden;overflow-y:auto,可以达到禁用横向滚动条的效果。

       但是一放到手机上页面就会被强制加宽，出现横 向滚动条，而且在侧边栏收起后页面并没有恢复为原来尺寸，横向滚动条并无消失，百度了各种js无果。

        结果最后试着加 了两行css,竟然解决了 0.0，以下是html,body最终样式

* margin: 0; padding: 0;

html,body

width: 100%;

height: 100%;

position: absolute;

left: 0;top: 0;

overflow: hidden;

overflow-y: auto;



#wrapp

补充：除了这个还有个关于iframe中A 标签在手机上失效的问题，百度后发现原来是iframe无法滚动所致，把scrolling属性设置为auto后解决。

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