[boostrap传送带被包裹且包装器为position:absolute
...时,我在页面上遇到了有趣的行为,因此当页面向下滚动而下一个carousel-item
具有不同的height
页面时, “跳” ...
我的home-hero-wrapper
为100vh,包裹转盘的carousel-home-wrapper
绝对位于底部。无论carousel-item
的大小如何,它都将位于home-hero-wrapper
的底部
问题:一切正常,直到您稍微向下滚动页面(轮播必须仍在视口上)并且在轮播过渡上,页面只是“跳转”。但是home-hero-wrapper
不会改变大小,我不知道为什么各个部分的行为都与此类似...
我想念的是什么?有提示吗?
下面的代码段再现了问题:
.home-hero-wrapper {
height: 100vh;
min-height: 200px;
position: relative;
}
.carousel-home-wrapper {
position: absolute;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="home-hero-wrapper bg-info">
<div class="hero-image" style="background-image: url(https://via.placeholder.com/1024x800);">
</div>
<div class="carousel-home-wrapper">
<div
id="carousel_home"
class="carousel slide carousel-fade"
data-ride="carousel"
data-interval="1000"
>
<div class="carousel-inner">
<div class="carousel-item bg-light active">
<h2>Content Shorter</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
</div>
<div class="carousel-item p-3 bg-light">
<h2>Content Longer</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem rem earum temporibus perferendis corrupti minus harum, ex ipsam molestiae iste dicta voluptatum mollitia quia animi ut, soluta molestias natus ipsa.</p>
</div>
</div>
</div><!-- #carousel_home -->
</div><!-- .carousel-home-wrapper -->
</div><!-- home-hero-wrapper -->
<div class="p-5 bg-warning">
<h2>Scroll until here</h2>
<h3>Make sure carousel still visible</h3>
<p>Waiting until carousel transition... All sections will "jump"</p>
</div>
<div class="p-5">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem rem earum temporibus perferendis corrupti minus harum, ex ipsam molestiae iste dicta voluptatum mollitia quia animi ut, soluta molestias natus ipsa.
</div>
<div class="p-5">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem rem earum temporibus perferendis corrupti minus harum, ex ipsam molestiae iste dicta voluptatum mollitia quia animi ut, soluta molestias natus ipsa.
</div>
<div class="p-5 bg-danger">
<h2>Make sure carousel still visible</h2>
</div>
确定,为此,首先将类p-3