轮播内容更改其高度/内容时页面会跳开

问题描述 投票:1回答:1

[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>
html css bootstrap-4 bootstrap-carousel
1个回答
0
投票

确定,为此,首先将类p-3

© www.soinside.com 2019 - 2024. All rights reserved.