垂直滑动条高度不合理

Question

我在 bootstrap 4 行内创建了一个垂直滑动器，并对该行应用了高度限制。但是垂直滑动器越界了。

我们将不胜感激。

谢谢。

HTML:

<div class="row">
  <div class="col-6 mh-50">
    <div class="v-swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-1" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-2" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-3" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-4" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-5" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-6" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-7" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-8" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-9" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-10" /></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>

  <div class="col-6 mh-50">
    <img src="//placehold.it/200x100?text=Col-2" />
  </div>
</div>
<div class="row">
  <img src="//placehold.it/500x100?text=Row-2" />

</div>

CSS:

.mh-50 {
  max-height: 50vh;
}

JS:

var vswiper = new Swiper('.v-swiper-container', {
  direction: 'vertical',
  speed: 2000,
  autoplay: {
    delay: 2000,
  },
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

JS Fiddle: https://jsfiddle.net/4ogo3vcg/4/

Answer 1

问题的原因是 html 标签的子标签不会被其父标签的边界自动剪裁。下面的例子模拟了这种现象。

.box {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
}

.clip {
    overflow: hidden;
}

<div style="float: left; margin: 20px;">
    <div class="box" style="background-color: red; padding: 20px;">
        <div class="box" style="background-color: green;"></div>
    </div>
</div>

<div style="float: left; margin: 20px;">
    <div class="box clip" style="background-color: red; padding: 20px;">
        <div class="box" style="background-color: green;"></div>
    </div>
</div>

正如您还可以从示例中看到的那样，解决方案是使用 overflow css property，它指定当内容太大而无法放入其块级容器时要执行的操作。

在您的情况下，最快的解决方法是将 overflow: hidden; 放入 .mh-50 class，但这也会影响项目的其他部分，所以我宁愿将其放入单独的 class.

此外，关于您标记的其他方面的几点说明：

根据 Bootstrap Docs“在网格布局中，内容必须放在列中 (.col)，并且只有列可以是行的直接子项 (.row)。”
同样，内容应放入 .container 或 .container-fluid 标签中。（这将从您的示例中删除水平滚动条。）

话虽如此，您的代码可能如下所示：

var vswiper = new Swiper('.v-swiper-container', {
    direction: 'vertical',
    speed: 2000,
    autoplay: {
        delay: 2000,
    },
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
});

.mh-50 {
    max-height: 50vh;
}

.clip {
    overflow: hidden;
}

<div class="container-fluid">
    <div class="row">
        <div class="col-6 mh-50 clip">
            <div class="v-swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-1" /></div>
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-2" /></div>
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-3" /></div>
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-4" /></div>
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-5" /></div>
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-6" /></div>
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-7" /></div>
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-8" /></div>
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-9" /></div>
                    <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-10" /></div>
                </div>

                <div class="swiper-pagination"></div>
            </div>
        </div>

        <div class="col-6 mh-50">
            <img class="img-fluid" src="//placehold.it/800x100?text=Col-2" />
        </div>
    </div>

    <div class="row">
        <div class="col">
            <img class="img-fluid" src="//placehold.it/1600x100?text=Row-2" />
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.6/css/swiper.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.6/js/swiper.js"></script>

Answer 2

我在使用 Swiper 6.7.0 版时遇到了同样的问题。我在这里分享我的解决方法。

我在 CSS 中进行了调整。

.swiper-container-vertical .swiper-wrapper {
      position: absolute;
}

我希望这可以结束某人的搜索。快乐编码！ :)

垂直滑动条高度不合理

Unreasonable height of vertical swiper

bootstrap-4

swiper