之前开发了一个手机端页面，里面有个提交表单，操作表单时会有对应的遮罩层提示，而这个遮罩层正是常见的那种盖着全屏黑色半透明的。
问题出现于，当页面高度过长出现滚动条时，这时如果操作表单出现遮罩层，手指在点击屏幕难免会有些滑动动作，这时候页面会或上或下的滚动，这时属于正常现象。
但是页面就偏移了当前的位置，有点不利于用户体验，如果遮罩关闭时页面跑上跑下了，再回到表单位置时，还要在重新滑动页面到达所要的位置，很不利于用户体验。
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>