标签:asc doctype 效果 rev class 元素 代码 java 设置
有一些场景,比如弹窗,比如商品的抛物线效果,为了更好的前端用户体验,要求临时禁止滚动条的滚动。
参考了前辈的一些经验,比如这位:https://yujiangshui.com/review-how-to-make-popup-mask-effect/。现做如下总结。
方案1,最为简单粗暴的方式当然是直接将dom的body挂一个样式即overflow:hide。
document.body.style.cssText = ‘overflow-y:hidden‘;
基本思路:需要禁止时执行上面代码,禁用解除则用
document.body.style.cssText = ‘overflow-y:auto‘;
但上述方案存在一个问题,就是页面内容抖动,这产生了不好的前端操作体验。
方案2,采用jquery的解决方案,jquery作为老牌的js库,自带禁用功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery实现方案</title> </head> <body> <div style="height: 200px;width: 100%;"> </div> <div style="text-align: center;"> <button id="btn">点我测试</button> </div> <div style="width: 100%;height: 1200px;">这是用开显示滚动条的</div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function unScroll() { var top = $(document).scrollTop(); $(document).on(‘scroll.unable‘, function(e) { $(document).scrollTop(top); }) } //移除禁止滚动条滚动 function removeUnScroll() { $(document).unbind("scroll.unable"); } $("#btn").click(function() { unScroll(); setTimeout(function() { removeUnScroll(); }, 5000) }) </script> </body> </html>
注意引入jquery,测试觉得还有有些小问题。
方案3,采用css的overflow设置结合padding-right的方案。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>另一种方式禁用</title> </head> <body> <div style="height: 200px;width: 100%;"> </div> <div style="text-align: center;"> <button id="btn">点我测试</button> </div> <div style="width: 100%;height: 1200px;">这是用开显示滚动条的</div> <script type="text/javascript"> document.getElementById(‘btn‘).addEventListener(‘click‘, function() { document.body.style.cssText = "overflow-y:hidden;padding-right:17px;"; setTimeout(function() { document.body.style.cssText = "overflow-y:auto;padding-right:0px;"; }, 2000) }); </script> </body> </html>
但是部分浏览器的padding-right不为17px;所以产生了方案4。
方案4,就是动态设定padding-right值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>另一种方式禁用</title> <style type="text/css"> .box-lock-test { overflow-y: hidden !important; } </style> </head> <body> <div style="height: 200px;width: 100%;"> </div> <div style="text-align: center;"> <button id="btn">点我测试</button> </div> <div style="width: 100%;height: 1200px;">这是用开显示滚动条的</div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> document.getElementById(‘btn‘).addEventListener(‘click‘, function() { // var w1 = $(window).width(); // $(‘html‘).addClass(‘box-lock-test‘); // var w2 = $(window).width(); // $(‘html‘).removeClass(‘box-lock-test‘); var w1 = $(window).width(); $(‘body‘).addClass(‘box-lock-test‘); var w2 = $(window).width(); $(‘body‘).removeClass(‘box-lock-test‘); // document.documentElement.style.cssText = `overflow-y:hidden;padding-right:${w2-w1}px;`; // setTimeout(function() { // document.documentElement.style.cssText = "overflow-y:auto;padding-right:0px;"; // }, 2000) document.body.style.cssText = `overflow-y:hidden;padding-right:${w2-w1}px;`; setTimeout(function() { document.body.style.cssText = "overflow-y:auto;padding-right:0px;"; }, 2000) }); </script> </body> </html>
如上。
但在具体的开发应用中,发现一些问题,针对overflow的,原因是dom的html和body元素高度塌陷。要使用overflow需要特别留意一下这点。
标签:asc doctype 效果 rev class 元素 代码 java 设置
原文地址:https://www.cnblogs.com/zhensg123/p/11640757.html