CSS - 无法逃脱 swiperjs 的溢出隐藏容器答案

【问题标题】：CSS - unable to escape overflow-hidden container of swiperjsCSS - 无法逃脱 swiperjs 的溢出隐藏容器
【发布时间】：2021-08-04 09:45:25
【问题描述】：

我有一个使用 swiperjs 的滑块，我想将下拉菜单添加到 swiper-slide。默认情况下，所有 swiper 容器都是相对位置，所以我将它们全部更改为静态位置，但下拉菜单无法转义到根容器（相对位置）。

这里是 jsfiddle 中的演示：https://jsfiddle.net/7uas82rz/20/

HTML

<div class="freedom my-5">
  <div class="swiper-container myswiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="dropdown">
          <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span>SLIDE 1</span>
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Menu 1</a></li>
            <li><a class="dropdown-item" href="#">Menu 2</a></li>
          </ul>
        </div>
      </div>
      <div class="swiper-slide">
        <span>SLIDE 2</span>
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>

CSS

.freedom{
  position:relative;
}
.swiper-container, .swiper-wrapper, .swiper-slide{
  position:static !important;
}
.swiper-container > .swiper-wrapper > .swiper-slide{
  width:200px;
}

Javascript

const swiper = new Swiper(".myswiper",{
  speed:1000,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  slidesPerView: 'auto',
  initialSlide:0,
  loop:true,
  loopedSlides:20,
  visibilityFullFit: true,
  autoResize: false,
  spaceBetween: 0,
});

【问题讨论】：

这是因为 overflow: hidden 设置在父元素 .swiper-container 上：这将有效地隐藏溢出的内容（包括您的下拉菜单）。但是，删除此样式可能不是一个好主意，因为它可能会影响滑块的外观。
@Terry 是的，我注意到了，但我在这里做了一些搜索，解决方案是将 child 设置为绝对位置以逃避。可悲的是，它不适用于我的情况。
不幸的是，你不能用 css 做到这一点——你不能让 x 隐藏和 y 可见（见stackoverflow.com/questions/6421966/…）——你需要将你的下拉菜单移到溢出 div 之外显示

标签： css escaping overflow hidden swiperjs

【解决方案1】：

您可以强制在.swiper-container 元素上显示溢出的内容：

.swiper-container {
  overflow: visible !important;
}

但是，此覆盖可能会干扰插件的样式/视觉效果。

参见概念验证示例：

const swiper = new Swiper(".myswiper",{
  speed:1000,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  slidesPerView: 'auto',
  initialSlide:0,
  loop:true,
  loopedSlides:10,
  visibilityFullFit: true,
  autoResize: false,
  spaceBetween: 0,
});

.swiper-container > .swiper-wrapper > .swiper-slide{
  width:200px;
}

.swiper-container {
  overflow: visible !important;
}

<!DOCTYPE html>
<head>
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
  <div class="swiper-container myswiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="dropdown">
          <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span>SLIDE 1</span>
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Menu 1</a></li>
            <li><a class="dropdown-item" href="#">Menu 2</a></li>
          </ul>
        </div>
      </div>
      <div class="swiper-slide">
        <span>SLIDE 2</span>
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</body>

【讨论】：

overflow:hidden 对我来说是必须的，否则我的布局会被破坏。

【解决方案2】：

更新：我找到了一个技巧，可以在不改变溢出或 html 流的情况下解决问题。关键是每当我悬停包含下拉菜单的幻灯片并在将光标移出幻灯片时切换回原始高度时，我都需要更改滑动容器的高度。为此，我需要设置 swiper-container pointer-events: none 和下拉菜单 pointer-events: auto。然后在悬停时为 swiper-container 设置一个高度。

工作代码：https://jsfiddle.net/4nw05vyh/

const swiper = new Swiper(".myswiper",{
  speed:1000,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  slidesPerView: 'auto',
  initialSlide:0,
  loop:true,
  loopedSlides:3,
  visibilityFullFit: true,
  autoResize: false,
  spaceBetween: 0,
});

:root{
  --swiper-navigation-size:20px !important;
}
.slider-section{
  top:50px;
  position:relative;
  width:400px;
  height:50px;
  margin:auto;
}
.swiper-container{
  width:90%;
  height:100%;
  pointer-events:none;
  background-color:lightgray;
}
.swiper-container:hover{
  height:300px;
}
.dropdown{
  pointer-events:auto;
}
.swiper-container > .swiper-wrapper > .swiper-slide{
  width:100px;
  margin-left:30px;
  margin-top:10px;
}

<!DOCTYPE html>
<head>
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
  <div class="slider-section">
    <div class="swiper-container myswiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="dropdown">
            <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span>SLIDE 1</span>
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Menu 1</a></li>
              <li><a class="dropdown-item" href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
        <div class="swiper-slide">
          <span>SLIDE 2</span>
        </div>
      </div>      
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</body>

【讨论】：