vue出现弹窗防止滚动穿透,弹窗内允许滚动

2024-08-13

vue 弹框产生的滚动穿透问题

首先定义一个全局样式: .noscroll{ position: fixed; left: 0; top: 0; width: 100%; } 创建一个dom.js文件,定义几个方法: export function hasClass(el, className) { let reg = new RegExp('(^|\\s)' + className + '(\\s|$)') return reg.test(el.className) } export function addClass(el

h5页面弹窗滚动穿透的思考

可能我们经常做这样的弹窗对吧,兴许我们绝对很简单,两下搞定: 弹窗的页面结构代码:  <div class="mask" ontouchstart = "return false" style="display:none"></div> <div class="main_venue_tip" style="displa

H5当弹出弹窗遮罩时如何阻止滚动穿透(使用css方式)

最近的一个H5活动中有一个是点击[分享]弹窗指引遮罩弹窗引导用户进行分享,但突然发现弹出弹窗的时候下层仍然可以进行滑动,这个问题是个H5经久不衰讨论的问题,重点是我这个页面在安卓系统上有明显的滑动闪烁问题,所以不得不进行解决,具体导致闪烁问题待排查,这里是使用了规避方法,即当弹出弹窗的时候固定弹窗,参考:https://juejin.im/post/5c4974f0518825260c5d1851 这里先记录最终解决方案,是使用当弹窗出现的时候将页面body的position设置为fixed并记

Vue项目移动端滚动穿透问题

概述今天在做 Vue 移动端项目的时候遇到了滚动穿透问题,在网上查资料后,选取了我觉得最好的方法,记录下来供以后开发时参考,相信对其他人也有用. 上层无需滚动如果上层无需滚动的话,直接屏蔽上层的 touchmove 事件即可.示例如下: <div @touchmove.prevent> 我是里面的内容 </div> 上层需要滚动如果上层需要滚动的话,那么固定的时候先获取 body 的滑动距离,然后用 fixed 固定,用 top 模拟滚动距离:不固定的时候用获取 top 的值

一个事件一定时间内只允许点击执行一次与 vue阻止滚动穿透

可能我的方法很笨,简单实现来的就是给两个状态,一个状态点击时就发生改变,另外一个给一个定时器延迟改变篮圈部分,给了两种状态,一个isDisable,一个comeTime 点击事件以后comeTime跟随事件直接改变状态,而isDisable则用setTimeout延迟两秒改变,这样就可以阻止连续点击事件触发器以后事件冒泡产生bug 关于vue阻止滚动穿透,相当简单,就在标签内加一串: @touchmove.prevent 精彩

【JS】341- 移动端滚动穿透的6种解决方案

前言相信能看到这篇文章的你,已经是遇到了这个问题.我就不gif展示问题效果了. 鉴于此问题是面试的常客,故特地针对滚动穿透这个疑难杂症,整理了六个解决方案. 各方法操作难易不同,分别针对弹层和body是否超出一屏可滚动等不同情况.看官可以对症下药. 目录 1 body无滚动 + 弹层无滚动[css-超出隐藏] 2 body无滚动 + 弹层内部滚动[css-弹框超出滚动] 3 body滚动 + 弹层无滚动[js-阻止弹层中touchmove的默认行为] 4 body滚动 + 弹层内部滚动[js-

移动端H5滚动穿透解决方案

最近遇到一个很巨恶心的问题 ios10下面页面弹窗有滚动穿透问题各种google 终于找到了答案,但是体验还不是很好,基本能忍受废话不多说,上方法最后终于想到一个处理方案,就是第一种方案的升级版,需要配合JS,大致思路是弹窗显示时JS读取这时页面的scrollTop,然后将主体内容position:fixed,top设为scrollTop的负值,这样可以从根本上固定下层内容,然后隐藏弹窗时再将主体内容position:static;scrollTop设回来.完美解决问题.经测试这种方

弹层蒙版（mask），ios滚动穿透，我们项目的解决方案

问题描述项目开发遇到一个ios独有的问题,在wkwebview中稳定复现问题: 弹出一个蒙版,当在蒙版上面滑动的时候蒙版后面的内容滚动了这当然是ios的bug,但是经过我们测试iphone7也会复现这个问题,所以没办法需要兼容. vue 弹框产生的滚动穿透问题百度了下好多思路方法1: 直接禁用滚动容器的overflow,然后记录scrollTop并恢复,这种方法不适合我们当前场景. 1. 浮层的入口有多个页面 2. 浮层后面可滚动的容器有多个(3个) 3. 滚动容器有横向和纵向滚动,很

Day14 Javascript 点击添加出弹窗，取消隐藏弹窗小练习反选，全选，取消边框

点击添加出弹窗,取消隐藏弹窗小练习代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; top:0; right: 0; bottom: 0;

All about Div内显示滚动桥

Div内显示滚动桥看似是一个简单的前端问题,然而实际会发现还是有挺多需要注意的, 本文尝试对div内显示滚动桥的各种主要实现及一些难题进行研究. 横向滚动桥横向滚动桥比较简单,无需设置宽度,直接overflow-x:auto就ok. 这里需要注意的是使用white-space:nowrap去避免自动换行,导致横向滚动桥出不来. 如果要确保横向滚动桥显示,关键点是要不自动换行: 使用white-space:nowrap去避免自动换行,否则会导致横向滚动桥出不来. 如果有内部元素,内部元素需要使用

vue单页应用中返回列表记住上次滚动位置、keep-alive缓存之后更新列表数据那点事

实践场景需求产品列表中,滚动到一定位置的时候,点击查看产品信息,后退之后,需要回到原先的滚动位置,这是常见的需求所有页面均在router-view中,暂时使用了keep-alive来缓存所有页面,所以进入不同分类的产品列表,和不同的产品详情页面,需要更新数据首先注意: 本次实践测试环境为pc端的webkit内核浏览器,手机暂时不测试使用$router.back(-1) 和浏览器后退按钮效果一样必须使用keep-alive缓存路由页面才能记住上次的位置,否则使用浏览器后退或$router

js - 移动端的超出滚动功能，附带滚动条，可解决弹层中滚动穿透问题。

背景: 弹层里边有可滚动区域时,在移动端的坑我就不多说了. 找了很多解决滚动穿透的方案,最终都不能完美解决. 一气之下自己js撸了一个. 效果图: 原理: 1.解决滚动穿透:通过给弹层绑定touchmove和mousewheel事件,取消默认行为实现. 2.取消默认行为后不能滚动:给需要滚动展示的区域绑定touchstart.touchmove和mousewheel事件,监听触发区域的Y值,对应修改可滚动区域的translateY值,实现滚动效果. 缺点/不足:滑动起来略显卡顿,用户体验不好,有

[bug]小程序弹出层滚动穿透问题修复

如题,解决方案有两种: 1.如果弹出层没有滚动事件,就直接在蒙板和弹出层上加 catchtouchmove;(方便快捷) <template name="popup-modal"> <view class="modal-overlay" catchtouchmove /> <view class="popup" catchtouchmove> <view class="popup-title&q

获取浏览器弹窗alert、自定义弹窗以及其操作

web自动化测试第10步:获取浏览器弹窗alert.自定义弹窗以及其操作 - CSDN博客 http://blog.csdn.net/ccggaag/article/details/76573857 微博是否通知

HTML＋CSS实现大盒子在小盒子的展示范围内进行滚动展示

HTML+CSS实现大盒子在小盒子的展示范围内进行滚动展示 1.效果展示: 2.主要代码:样式: overflow:auto; 3.如果想要消除对应的滚动条: .out::-webkit-scrollbar{ display: none; } 4.创建对应的盒子(div)配置对应的样式: 源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>rowsp

modal 弹框遮罩层，滚动穿透bug 解决方案

modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activity-detail', { // 'activity-detail-scroll-lock': true, 'activity-detail-scroll-lock': isLock, }, ); <View className={computedClassName} onTouchMove={t

modal 遮罩层，滚动穿透 bug

modal 遮罩层,滚动穿透bug float 弹层 taro 小程序弹框滚动击穿问题 https://segmentfault.com/q/1010000011134345 solution disable scroll event handleTouchScroll = (flag = `true`) => { log(`touch scroll`) // if (ENV !== Taro.ENV_TYPE.WEB) { // return // } document.body.add

禁止uiscrollview垂直方向滚动，只允许水平方向滚动；或只允许垂直方向滚动

禁止UIScrollView垂直方向滚动,只允许水平方向滚动 scrollview.contentSize = CGSizeMake(你要的长度, 0); 禁止UIScrollView水平方向滚动,只允许垂直方向滚动 scrollview.contentSize = CGSizeMake(0, 你要的宽度); 在UIScrollView的SubView里面弹出一个pickerView的时候,想禁止UIScrollView滚动,如何实现? scrollView.scrollEnabled =

jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

jquery图片无缝滚动代码左右上下无缝滚动图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

vue出现弹窗防止滚动穿透,弹窗内允许滚动

热门专题