移动端300ms延迟原理，穿透、遮罩层滑动导致下面滑动总结

本是古典何须时尚 2021-12-15 10:09 253阅读 0赞

遮罩层滑动导致下面滑动

1，阻止弹层滑动，使用默认事件，使用这种方式弹层不能滑动

document. getElementById( "model"). addEventListener( 'touchmove', function ( e) \{

e. preventDefault();

\}, false);

2，在Body,html使用overflow:hidden, 但是不能是的下面滑动

.fix \{

height: 100%;

overflow: hidden;

\}

3，同时设置不会有问题

.fix \{

height: 100%;

overflow: hidden;

\}

$( function () \{

var scrollTop;

$( '.show'). click( function () \{

scrollTop = document. documentElement. scrollTop; // 记录scrollTop的值

$( '\#model'). show();

$( '.content'). addClass( 'fix');

\});

$( '.hide'). click( function () \{

$( '\#model'). hide();

$( '.content'). removeClass( 'fix');

document. documentElement. scrollTop = scrollTop; // 设置scrollTop的值

\})

\})

[https://www.jianshu.com/p/6fd2873183e1?utm\_source=oschina-app][https_www.jianshu.com_p_6fd2873183e1_utm_source_oschina-app]

转载于:https://www.cnblogs.com/yayaxuping/p/10951753.html

[https_www.jianshu.com_p_6fd2873183e1_utm_source_oschina-app]: https://www.jianshu.com/p/6fd2873183e1?utm_source=oschina-app

发表评论取消回复

表情：

评论列表（有 0 条评论，253人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端300ms点击延迟

产生原因：手机使用了300ms的延迟来判定用户是否发生双击行为。解决问题： 1.禁用缩放 ![1459127-20190822213525607-13219945

布满荆棘的人生/ 2023年08月17日 17:33/ 0 赞/ 137 阅读

相关 vue遮罩层出现禁止穿透遮罩滚动页面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

我不是女神ヾ/ 2023年07月07日 03:40/ 0 赞/ 142 阅读

相关移动端解决300ms延迟

npm install fastclick --save main.js ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVp

快来打我*/ 2022年11月25日 13:21/ 0 赞/ 192 阅读

相关移动端遮罩层下内容不可滑动

//打开遮罩层的时候加上 document.body.style.position = “fixed” //关闭遮罩层的时候加上 documen

傷城~/ 2022年11月18日 13:57/ 0 赞/ 141 阅读

相关禁止遮罩层以下屏幕滑动

相信大家在做移动端开发的时候会经常遇到这种场景，需要适时的弹出遮罩（有时为了突出还会在外面加上蒙层），弹窗出现以后，为了追求良好的用户体验，遮罩以下的屏幕是禁止滑动的。在网上找

阳光穿透心脏的1/2处/ 2022年09月26日 11:55/ 0 赞/ 187 阅读

相关禁止遮罩层以下屏幕滑动

原帖地址：[https://www.cnblogs.com/gaohui/p/5819777.html][https_www.cnblogs.com_gaohui_p_5819

不念不忘少年蓝@/ 2022年05月22日 09:38/ 0 赞/ 167 阅读

相关移动端简单的遮罩层案例

一.CSS样式 loadingBg{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb

约定不等于承诺〃/ 2022年04月17日 03:14/ 0 赞/ 226 阅读

相关移动端开发遮罩层（弹窗）防止滚动穿透解决方案

在移动端页面开发中，经常会去封装一个遮罩层（全屏弹窗），遮罩层（全屏弹窗），遮罩层（全屏弹窗）的组件，但是如果是固定定位的position：fixed；在弹出的时候会遇到一些小

爱被打了一巴掌/ 2022年03月20日 15:06/ 1 赞/ 885 阅读

相关移动端之300ms延迟

原因无键盘全触屏手机初期，页面全是为PC端设计的（没有设置`<meta name="viewport">`），iPhone作为全触屏手机始祖，为了便于用户浏览网页引入了

Dear 丶/ 2022年01月12日 14:57/ 0 赞/ 259 阅读

相关移动端300ms延迟原理，穿透、遮罩层滑动导致下面滑动总结

遮罩层滑动导致下面滑动 1，阻止弹层滑动，使用默认事件，使用这种方式弹层不能滑动 document. getElementById( "model"). addEve

本是古典何须时尚/ 2021年12月15日 10:09/ 0 赞/ 254 阅读