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

最新推荐文章于 2024-08-31 15:22:23 发布
最新推荐文章于 2024-08-31 15:22:23 发布
阅读量944 收藏 10
点赞数 7
分类专栏： Vant 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_56715703/article/details/136510367
版权
文章讨论了在van-overlay组件中使用lock-scroll属性的问题，指出在4.8.5版本下，该功能在手机端不生效，需设置为false以实现滚动。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

在组件上加lock-scroll

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

默认为true

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

关于小程序引用Vant中下拉菜单DropdownMenu的遮罩层Bug
qq_47608978的博客
07-25 4482
写在前面 做了一个原生小程序项目，设计图是将一个筛选放在了整个页面的中间，当然为了方便我选择了引用组件，查看了一下比较主流的小程序组件，发现Vant比较适合我的需求，于是就引用了Vant，怎么引用这里不做详细说明，接下来说一下遇到的问题，以及本人的新路历程和解决方法。 发现Bug 在引用Vant组件一直到看官方示例文档，期间都很顺利，实现效果也很满意，就当我以为这个问题即将结束的时候，新的问题出现了。下拉菜单放到中间位置，上方没有遮罩，这个时候滑动上方的部分，整个内容都会跟着滚动，然而我们引用的下拉菜
VantUI中van-overlay组件内部溢出内容不可滑动
Wyatto137的博客
08-15 1719
解决van-overlay内部内容无法滑动问题
解决移动端使用Vant van-overlay 遮罩层导致的弹窗不可滚动问题
Hi_alan的博客
08-31 2150
我们在进行H5调试的时候，尽量使用Nexus 4模式，如下图所示：因为之前一直习惯都是Responsive 和 默认显示的那几种方式进行调试，也并没有发现问题，但是在这次的调试中发现这种浏览器样式显示正确的，但是手机端访问的时候还是会有些区别导致样式显示有问题。
使用van-overlay，弹窗内容不可滚动
weixin_43606967的博客
10-26 536
弹窗内容很多，但是手机上不显示滚动条，不能滚动，找了半天，注意这个属性啊啊啊啊。
vantUI组件vant-overlay组件使用时移动端不能滑动问题全纪录
Dysons的专栏
07-06 6973
移动端前端项目开发中一直使用的是vantUI，在这次的项目中遇到了vant-overlay组件中的内容不能滑动，在PC端用鼠标不能拖动 只能滚轮滑动，开始以为是我的样式或者js出现了问题，检查下来并不存在问题，后台突发灵感想着不用这个组件试一下，果然是这个vant-overlay的问题，于是弃用了，自己写了个遮罩组件用起来，不知道有没有人遇到这个问题，欢迎告知除了我这个还有没有其他的解决办法，感谢~~~ 相关:vantUI, Vue ...
vant避坑之---------overlay弹出层只可滚动不可滑动
niceday的博客
09-22 1034
css 只可滚动不可滑动
vant组件overlay设置溢出滚动在手机上没有效果
qq_45989814的博客
12-04 1207
vant 属性lock-scroll
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-dropdown-menu 滚动跟随
最新发布
02-26
为了使 `van-dropdown-menu` 组件在页面滚动时不丢失位置或跟随滚动，可以通过调整组件的定位方式来实现。具体方法如下： #### 方法一：使用绝对定位 通过设置 `get-container` 属性为当前容器，并确保其内部元素...
【移动端vant 地址选择滑动不了】
前端-CV全粘工程师
12-07 1090
因为vant中的弹窗组件都会有个默认参数，打开弹窗时禁止页面滚动，这个可以解决滚动穿透的问题，但是像我们这种弹窗中有地址选择的就会出现地址无法选择的bug。H5页面直接在浏览器打开是没有任何问题的，但是内嵌到小程序中就会出现，目前已出现在抖音，快手，小程序中，其他的没有试。这个bug出现得同时具备几大要素：1.内嵌H5，2，地址选择之前有使用过弹窗,设置lock-scroll为false。设置lockScroll为false。1.Overlay 遮罩层。2.Dialog 弹出框。
vant tab组件动态改变van-tab title后显示不全问题，需要手动滑动
我总是词不达意的博客
05-24 7077
vant tab组件
vant使用van-list不能上下滚动，滑动无效的解决？
m0_61663332的博客
01-13 5154
vant使用van-list不能上下滚动，vant组件的list不能上下滑动
vant库使用遇到的情况
sedfghjwish77_的博客
12-16 2144
vant组件
van-overlay遮罩层出现后van-field的placeholder会在遮罩层上面
wcy0112的博客
03-28 529
检查 van-field 和 van-overlay 相关父级元素是否正确设置了 position 属性，比如 relative、absolute 或 fixed。如题，如图，加了z-index后不生效。
vant 自定义遮罩层van-overlay时局部滚动
YY_WYG的博客
07-08 2352
vant 自定义遮罩层van-overlay时局部滚动，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为，体验甚是不好 设置:lock-scroll="false"时，规则里面的滑块才会滚动，overflow-y才会生效---->这是个坑 上代码新建utils/modalHelper.js文件...
vant Overlay遮罩层背景颜色样式自定义
Deslord的博客
06-04 9005
实习不久，被调到了h5,最近在学习Vue与Vant，作为h5小白，记录一下自己遇到的问题。 vant中的Overlay遮罩层本身好用，但是有些时候，想造成“点击某个div以外的空白部分后，div消失”的效果，一般是Overlay中放置一个div并将Overlay背景设置为透明。发现csdn上竟然，很少提及。 1.首先官方接口有提及 2.所以我们需要调用custom-style，接口。相信很多小白主要问题在于如何对custom-style赋值。 赋值如下 <overlay :show="show" :
van-overlay 局部展示
龙丨行的博客
01-07 1513
van-overlay 局部展示
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值