swiper 内部元素如何突破 overflow:hidden 的限制

2020-07-28T15:12:00

swiper 作为一滑动插件非常好用,但 swiper 存在一些限制。比如我这次遇到的 swiper 内部元素显示受到 .swiper-container 样式 overflow:hidden 限制,具体例子就是提示框。当用户 hover 到某个元素上,需要展示出提示框。但因为 overflow:hidden 的限制,超出外部 div 层的部分都被隐藏了。

swiper 使用方法

我使用的版本是 swiper 3.4.2

通过百度搜索相关的解决方案,大部分方案解答都形如 子元素超出overflow:hidden的父元素显示,就是使用绝对定位。

整理的 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素超出 overflow:hidden 的父元素显示</title>
    <style type="text/css" media="screen">
        .super {
            width: 100px;
            height: 50px;
            border: 1px solid red;
            overflow: hidden;
        }
        .sub {
            width: 50px;
            height: 100px;
            background-color: olive;
        }
        .sub2 {
            width: 50px;
            height: 100px;
            background-color: olive;
            position: absolute;
        }
        .super3 {
            width: 100px;
            height: 50px;
            border: 1px solid red;
            position: relative;
            overflow: hidden;
        }
        .sub3 {
            width: 50px;
            height: 100px;
            background-color: olive;
            position: fixed;
        }
    </style>
</head>
<body>
<h1>default</h1>
    <div class="super">
        <div class="sub"></div>
    </div>
    <br/>
<h1>position:absolute</h1>
    <div class="super">
        <div class="sub2"></div>
    </div>
<br/>
<h1>position:fixed</h1>
<div class="super3">
    <div class="sub3"></div>
</div>
</body>
</html>

展示效果

position:absolute 的例子里,如果外层 super 存在 position:relative,显示就会恢复成 default 状态。

position:fixed 的例子里,不管外层是否存在 position:relative,都能显示正常。但不可以添加 topleft 相关的属性。

对比发现,swiper 外层 .swiper-containerswiper-wrapperswiper-slide 都存在 position:relative 样式,尝试将目标元素设置为 position:fixed 展示溢出部分,无效...

wtf??? demo 测试有效,引入 swiper 之后就不起作用了。尝试修改各层的样式属性都无效果,溢出部分就是无法正常显示。

想过干脆去掉 overflow:hidden,但这样 swiper 其他本该隐藏切换显示的 swiper-slide 也显示出来了,页面混乱,pass 掉。

最后找到了一个不算办法的办法:修改外层 swiper-containerswiper-slide 的宽度和高度。

放大 swiper-container 的宽度和(或)高度,然后在 swiper-slide 层进行收紧,这样就能将本来会溢出隐藏的目标元素展示出来。

相当于小盒子放不下,就拿个大盒子放,画布太小画不下,就换一个大画布来画。

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »