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