【CSS】swiper切换时,后面item的内容滚动不了

背景

做了一个功能, swiper里每个item里面有内容, 根据内容高度滚动
ps : 页面也有滚动

问题 : 正常给到外部边框height和overflow-y:auto, swiper第一个item的内容, 可以正常滚动, 而第二个swiper-item的内容虽然有滚动, 但是非常不灵敏, 甚至无效, 看起来有时和外部页面的滚动冲突了, 有时看起来似乎并没有调起这个内容的滚动, 只调起了外部页面的滚动

解决方法

猜测了很多可能性, 最后尝试了给外部父元素以下两个样式, 于是后面的swiper-item的内容可以正常y轴滚动了
猜测问题所在 : 在手机调试时非常明显, 滑动item2时, 根本没有滑动内部的content, 而是滑动的整个页面, 于是猜测是不是swiper滑动时某个元素把我的内容遮住了, 导致我滑动的并不是内容, 而是页面, 于是提升元素层级, 给个定位, 成功了!
以上只是猜测, 并不确定~

position:relative;
z-index:999;
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值