手机端阻止页面滑动

之前开发了一个手机端页面，里面有个提交表单，操作表单时会有对应的遮罩层提示，而这个遮罩层正是常见的那种盖着全屏黑色半透明的。

问题出现于，当页面高度过长出现滚动条时，这时如果操作表单出现遮罩层，手指在点击屏幕难免会有些滑动动作，这时候页面会或上或下的滚动，这时属于正常现象。

但是页面就偏移了当前的位置，有点不利于用户体验，如果遮罩关闭时页面跑上跑下了，再回到表单位置时，还要在重新滑动页面到达所要的位置，很不利于用户体验。

js有很多种事件可以阻止滚动条的滚动，本篇文章为了实现起来更简单就发现了CSS的实现方式。

touch-action:none; 和 touch-action:auto;

这个css属性值有好几个可以自行找度娘。

有个不是问题的问题，如果在电脑切换手机模式浏览，鼠标点击页面滑动是可以达到预定的效果，但是用鼠标的滚轮，页面该滚动还是会滚动。哈哈~~

不过手机端没有这玩意儿，就不考虑了，你说呢？

方法敲简单，演示地址：https://xibushijie.github.io/static/touch.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机端阻止页面滑动</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <script src="../js/jquery-3.3.1.min.js"></script>    
    <style>
        .tk {    
            display: none;
            position: fixed;
            top:0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0,0,0,.5);
            text-align: center;
        }
        .touch {
            touch-action:none;
        }
        .touch2 {
            touch-action:auto;
        }
        .close {
            color: #fff;
            margin-top: 3rem;
        }
    </style>
    
</head>
<body style="height: 2000px">
    <input type="button" value="点击">
    <div class="tk">
        <div class="close">X</div>
    </div>
    <script>
        $("input").click(function() {
            $(".tk").show();
            $("body").addClass('touch');
        });

        $(".close").click(function(event) {
            $(".tk").hide();
            $("body").removeClass('touch');
        });
    </script>
</body>
</html>

手机端阻止页面滑动

猜你喜欢