解决移动端、pc端滚动穿透的问题

最新推荐文章于 2024-02-29 13:21:00 发布
最新推荐文章于 2024-02-29 13:21:00 发布
阅读量526 收藏 8
点赞数 7
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36893477/article/details/135061557
版权
qq_36893477
关注
Vue2.0-mint-ui解决移动端苹果手机有滚动穿透的问题
swiftlinlei的博客
07-23 5200
1.遇到的问题：使用mint-ui的弹窗选择时底部页面会出现滚动效果（仅出现在苹果手机，安卓手机，pc端正常） 2.问题原因：滚动穿透，这是啥，我也不懂 3.解决方式：参考文档，了解下：https://blog.csdn.net/weixin_40126227/article/details/80858990 思路就是弹出层打开的时候禁止body的滑动事件，弹出层关闭恢复body的滑动事件 ...
移动端元素移动导致的页面滚动问题（滚动穿透）
nnni
07-21 1045
引 需求要做个功能，页面上的一个小图标从固定变成可移动。一把梭哈后，在PC上显示没有问题，移动的可欢快了，但是到了手机里以后出现了“联动问题”。 所以，当元素移动的时候，页面也会出现上下的滚动，这样的体验是超级差的。 解决方案 document.addEventListener('touchstart', function(e){ console.log('开始移动'); const scrollTop = document.body.scrollTop || document.
滚动穿透问题完美解决方案
licanty的博客
01-22 2055
滚动穿透：简单的说，滚动穿透就是弹层中有滚动时，滚动弹层滚动条背景下面内容也会滚动； 目标：弹层滚动时，背景下面内容不会滚动，弹出层关闭后页面的滚动位置仍在原处不会丢失！ 下面这段代码直接引用，看效果； <!DOCTYPE html> <html lang="zh-CN" > <head> <meta charset="utf-8"> <
移动端、pc端，遮罩层滚动穿透问题
yiyueqinghui的博客
02-22 3332
常见的解决方式有一下三种： 1. css 之 overflow: hidden； .model-open { overflow: hidden; height: 100%; } 遮罩层显示时将 .modal-open 添加到 html上，删除多余一页的部分，禁止页面滚动。 遮罩层隐藏时，移除.modal-open，恢复页面滚动即可； 缺点： pc端有效，移动端无效 2. js 之...
页面滚动穿透解决方案
z1010017573的博客
03-21 390
问题 移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容。 这是封装的一个方法， StopBodyScroll: function (isFixed) { try { var bodyEl = document.body; if (isFixed) { var top = window.scrollY bodyEl.style....
移动端html+css实现水平任意滚动（PC端也同理）
light
07-06 7223
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="IE=edge" http-equiv="X-UA-Compatible"> <meta content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-wi
html电脑上面点击穿透,click300ms点击问题和点击穿透.html
weixin_39640157的博客
06-25 265
Document点我(function(){let button = document.querySelector("button");button.onclick=function(){let time=new Date().getTime()console.log('button被点击余'+time);}})()/*1. click300ms 延迟问题为了兼容移动端：对click惊醒了，如果...
移动端H5常见问题以及解决方案
bufanweb的博客
07-16 1420
移动端H5常见问题以及解决方案 问题 下面列举了我遇到的一些常规问题,如有遇到其他问题的请在评论区补充,之后我也会实践加以补充,感谢! 以下解决方案,均经过我测试成功,健康安全,请放下食用.由于篇幅问题,某些非核心的解决方案的实现细节暂未谈论,需要的自行研究. 1.iOS滑动不流畅 表现 上下滑动页面会产生卡顿,手指离开页面,页面立即停止运动.整体表现就是滑动不流畅,没有滑动惯性. 产生原因 为什么在iOS的webview中滑动不流畅,它是如何定义的?* 最终我在safari文档里面寻找到了答案(文
滚动穿透的解决方案
Shadow_Weirdo
03-21 272
在移动端中，如果我们使用了一个固定定位的遮罩层，且其下方的dom结构的宽度|高度超出屏幕的宽度|高度，那么即使遮罩层弹出后铺满了整个屏幕，其下方的dom结构依然可以滚动，这就是大家所说的“滚动穿透”。 而且经常是你在pc模拟器上没有问题，但是真机打开就一定会出现。 方案：body滚动 + 弹层内部滚动[js-检测touchmove的target] 简单粗暴，一针见血：谁能动谁动，谁不能动就禁止to...
移动端滑动穿透解决方案：从overflow到touchmove
"滑动穿透问题的解决方法与移动端优化策略" 在移动互联网终端开发中，经常遇到一种情况，即当页面上有浮层时，滑动浮层内容会导致底层页面的滚动，这被称为滑动穿透问题。为了解决这个问题，开发者通常会尝试使用...
解决移动端页面出现 X轴横向滚动条问题
热门推荐
张鑫的博客
07-30 1万+
最近在用 Bootstrap 写一个需要适配 WEB 和 WAP 的网站，写完后发现 WAP 端总是会出现横向滚动条，也就是 X 轴滚动条，导致 WAP 端页面左右滑来滑去，很是令人蛋疼，即使设置了 overflow-x： hidden 也无法去除，通过各种途径寻找解决方法，最终在 张鑫旭 大神的一篇文章里找到了最终解决方法，在这里记录一下防止之后自己用得到时还需要重新找，也为那些同样有这方面问题...
记首次小程序遇到坑及解决
seevc的专栏
03-20 1142
由于工作需要，首次进行微信小程序开发，从基础环境搭建到小程序发布，体验到小程序便捷的同时，也踩了不少坑，在此记录下。
JS中事件穿透深度剖析与多种解决方案
cxu123321的博客
06-05 4765
JS中事件穿透深度剖析与多种解决方案 datura_lj 2018.06.25 03:49:45字数 839阅读 2,113 一、问题引出 最近项目开发过程中，在ios环境下。双击（doubletap）上层元素（固定定位fix），偶尔会触发下层（瀑布流中）路由跳转。 经过部门老大指导，才了解到这个现象叫做“事件穿透”。再此俺决定研究下为什么？ 二、事件来源 1. PC端 电脑上一般是鼠标操作，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和click.
解决移动端滚动穿透的6种方法，经常发生在弹出遮罩层内容滚动，下面页面也滚动的情况
最新发布
男神的专栏
02-29 2645
这时，我们可以通过记录用户打开弹窗前所滚动页面的位置，在弹层展开的时候赋给body在css中的top值，等关闭弹层的时候，再把这个值赋值给body在js中的scrollTop值，还原body的滚动位置。2、touchmove手势移动的时候，再次获取最新的坐标点y的值y2，（其实记录可滚动区域的可滚动高度、当前滚动距离等可以在一开始就记录，我这里写到了touchmove里，还可以再优化）。当弹层出现的时候不需要再禁掉body的滚动效果了，我们可以从弹层方面入手，阻止弹框的touchmove事件的默认行为。
uni-app小程序 解决滚动穿透之page-meta
weixin_49098968的博客
06-07 2645
页面是可以滚动的，该页面的弹窗、组件也是可以滑动的。 当我们滑动页面内弹出的弹窗、组件时，该页面也会跟着滚动，就会出现滚动弹窗内容时，页面内容也跟着滚动，这就是滚动穿透。 uni-app使用page-mate来解决滚动穿透
滚动穿透的6种解决方案(转载)
muzidanwu的博客
09-18 3679
原文链接: 滚动穿透的6种解决方案. 在移动端中，如果我们使用了一个固定定位的遮罩层，且其下方的dom结构的宽度|高度超出屏幕的宽度|高度，那么即使遮罩层弹出后铺满了整个屏幕，其下方的dom结构依然可以滚动，这就是大家所说的“滚动穿透”。 而且经常是你在pc模拟器上没有问题，但是真机打开就一定会出现。 这个经典八阿哥也是面试时经常会被追问的问题。相信能看到这篇文章的你，已经是遇到了这个问题。我就不gif展示问题效果了。 接下来我网罗了网络，整理了别人说的方案和我自己的方案，一共实现了六种方法，并经过了自己手
滚动穿透的6种解决方案【已自测】
weixin_34228387的博客
03-21 1866
在移动端中，如果我们使用了一个固定定位的遮罩层，且其下方的dom结构的宽度|高度超出屏幕的宽度|高度，那么即使遮罩层弹出后铺满了整个屏幕，其下方的dom结构依然可以滚动，这就是大家所说的“滚动穿透”。 而且经常是你在pc模拟器上没有问题，但是真机打开就一定会出现。 这个经典八阿哥也是面试时经常会被追问的问题。相信能看到这篇文章的你，已经是遇到了这个问题。我就不gif展示问题效果了。...
Vue重构项目时对document.body.scrollTop的设置不起作用
qq_42983685的博客
11-06 4806
用Vue重构项目时对document.body.scrollTop的设置不起作用 goto(index) { this.index=index let goto = document.getElementsByClassName('scroll-item'); // 获取滚动条需要移动的高度 let total =goto[index...
弹框滚动穿透方法汇总（转载）
qq_44441669的博客
09-29 1247
css垂直居中的所有方法 https://cloud.tencent.com/developer/article/1554183 解决弹框滚动穿透方法汇总 https://www.cnblogs.com/padding1015/p/10568070.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值