Vant组件中van-overlay页面太长无法滚动

最新推荐文章于 2024-08-31 15:22:23 发布
原创 最新推荐文章于 2024-08-31 15:22:23 发布 · 1k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #html

文章讨论了在van-overlay组件中使用lock-scroll属性的问题，指出在4.8.5版本下，该功能在手机端不生效，需设置为false以实现滚动。

内容太长，发现电脑中滚轮可以滚动，但是手机端手指滑动动不了。

在组件上加lock-scroll

<van-overlay :lock-scroll="false">

默认为true

注：我使用的版本是4.8.5，据说2版本不生效。

Vant 中的遮罩(van-overlay)不占满整个屏幕的用法
jjw_zyfx的博客
06-14 6798
效果如下： 代码如下： <template> <div class="wrapHeader"> <div class="buttonClick" @click="showMask">显示</div> <van-overlay :show="show" @click="show = false"> <ul class="ulLi"> <li&g..
小程序 阻止后面页面滚动-回退传递参数
qq_46199553的博客
08-14 643
微信小程序穿透
vant库使用遇到的情况
sedfghjwish77_的博客
12-16 2248
vant组件
van-overlay遮罩层出现后van-field的placeholder会在遮罩层上面
wcy0112的博客
03-28 572
检查 van-field 和 van-overlay 相关父级元素是否正确设置了 position 属性，比如 relative、absolute 或 fixed。如题，如图，加了z-index后不生效。
解决移动端使用Vant van-overlay 遮罩层导致的弹窗不可滚动问题
Hi_alan的博客
08-31 2623
我们在进行H5调试的时候，尽量使用Nexus 4模式，如下图所示：因为之前一直习惯都是Responsive 和 默认显示的那几种方式进行调试，也并没有发现问题，但是在这次的调试中发现这种浏览器样式显示正确的，但是手机端访问的时候还是会有些区别导致样式显示有问题。
VantUI中van-overlay组件内部溢出内容不可滑动
Wyatto137的博客
08-15 1861
解决van-overlay内部内容无法滑动问题
van-overlay显示滚动条
最新发布
12-27
### 如何在 `van-overlay` 组件中正确显示滚动条 为了使 `van-overlay` 组件能够正确显示滚动条并允许内容滚动，在移动设备上需调整配置以及处理一些常见的兼容性问题。 #### 1. 修改 `van-overlay` 属性设置 ...
在vue中使用vant TreeSelect分类选择组件操作
01-22
//先在你需要的页面中引入，第一个是弹出层,第二个是选择的 import { Popup } from vant; import { TreeSelect } from vant; 代码部分： <van v-model=policeShow position=top overlay=true> <van-tree-...
van-overlay
08-08
van-overlay是vant组件库中的一个自定义遮罩层组件。根据引用和的内容，van-overlay有一个lock-scroll属性，默认为true，表示当蒙层显示时，背景页面无法滚动。如果将lock-scroll属性设置为false，即lock-scroll=...
解决VantUI popup 弹窗不弹出或无蒙层的问题
01-18
把vant官网的popup+时间选择器抽成组件： popup1show: true 即弹窗显示 <van v-model=popup1show position=bottom overlay=true click-overlay=clickOverlay> <van-datetime-picker show-toolbar :title=...
使用van-overlay，弹窗内容不可滚动
weixin_43606967的博客
10-26 618
弹窗内容很多，但是手机上不显示滚动条，不能滚动，找了半天，注意这个属性啊啊啊啊。
vantUI组件vant-overlay组件使用时移动端不能滑动问题全纪录
Dysons的专栏
07-06 7017
移动端前端项目开发中一直使用的是vantUI，在这次的项目中遇到了vant-overlay组件中的内容不能滑动，在PC端用鼠标不能拖动 只能滚轮滑动，开始以为是我的样式或者js出现了问题，检查下来并不存在问题，后台突发灵感想着不用这个组件试一下，果然是这个vant-overlay的问题，于是弃用了，自己写了个遮罩组件用起来，不知道有没有人遇到这个问题，欢迎告知除了我这个还有没有其他的解决办法，感谢~~~ 相关:vantUI, Vue ...
vant避坑之---------overlay弹出层只可滚动不可滑动
niceday的博客
09-22 1061
css 只可滚动不可滑动
vant组件overlay设置溢出滚动在手机上没有效果
qq_45989814的博客
12-04 1240
vant 属性lock-scroll
【移动端vant 地址选择滑动不了】
前端-CV全粘工程师
12-07 1259
因为vant中的弹窗组件都会有个默认参数，打开弹窗时禁止页面滚动，这个可以解决滚动穿透的问题，但是像我们这种弹窗中有地址选择的就会出现地址无法选择的bug。H5页面直接在浏览器打开是没有任何问题的，但是内嵌到小程序中就会出现，目前已出现在抖音，快手，小程序中，其他的没有试。这个bug出现得同时具备几大要素：1.内嵌H5，2，地址选择之前有使用过弹窗,设置lock-scroll为false。设置lockScroll为false。1.Overlay 遮罩层。2.Dialog 弹出框。
vant 自定义遮罩层van-overlay时局部滚动
YY_WYG的博客
07-08 2532
vant 自定义遮罩层van-overlay时局部滚动，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为，体验甚是不好 设置:lock-scroll="false"时，规则里面的滑块才会滚动，overflow-y才会生效---->这是个坑 上代码新建utils/modalHelper.js文件...
Vant踩坑2——Overlay 遮罩层组件
weixin_47546788的博客
01-19 3673
问题：现有需求是一个页面，点击弹出一个遮罩层，并可以上下滚动，在chrome调试时，能上下滚动，但是在真机上不能滑动 解决方法： 将overlay遮罩层的lock-scroll属性默认设置为false。 官方说明是：overlay锁定背景滚动，锁定时蒙层里的内容也将无法滚动 <van-overlay :show="showDetail" :lock-scroll="false"> 来源参考：使用vant的Overlay 遮罩层做弹框，遇到的bug ...
vant 图片放大预览（vue3）
m0_58002043的博客
06-28 1740
vant通过遮罩层实现图片放大预览功能。
【定期记录】踩坑
weixin_44177952的博客
02-14 545
antd form label 定宽 同时设置span和style即可 1 需要设置span，style才生效 2 style优先级更好 会使得span失效 :labelCol=’{span:1,style:“width:100px”}’ wrapperCol同理 antd chrome 出现字体模糊 （只有chrome） 关闭a-table scroll css强制换行 ;word-break:break-all;word-wrap: break-word;white-space:normal..
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值