为什么滚动条没有隐藏在应用了 CSS 视差的容器元素中?

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

我使用教程在网站上尝试视差,一切正常,除了视差元素内有一个滚动条。身体没有边距。

我无法通过查看这里的其他帖子找到答案。

视差CSS

body {
    margin: 0;
    overflow-x: hidden;
    font-family: 'body-reg';
}

.row {
    width: 100%;
}

* {
    box-sizing: border-box;
}

.B1 {
    height: calc(100vh - 20px);
    min-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-perspective: 10px;
    perspective: 10px;
}

.B1 .container--parallax {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    transform-style: preserve-3d;
    z-index: -1;
}

.B1 .container--parallax .background {
    transform: translateZ(-10px) scale(2);
}

.B1 .container--parallax .foreground {
    transform: translateZ(-5px) scale(1.5);
}

.B1 .container--parallax .background,
.B1 .container--parallax .foreground {
    display: block;
    position: absolute;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: -1;
}

HTML

<body>
    <main>
        <section class="row B1">

            <div class="container--parallax">
                <img src="/assets/images/background.png" alt="Background" class="background"> 
                <img src="/assets/images/foreground.png" alt="Foreground" class="foreground">
            </div>

            <section class="row B2">

                <!-- add content -->

            </section>
        </section>

        <section class="row B3">

            <!-- more content -->

        </section>
    </main>
</body>

下面的正文的用途与此无关,但没有应用任何样式。

.B1 里面不应该有滚动条,那为什么会有呢?

html css parallax
1个回答
0
投票

尝试使用这个!

.B1 {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.B1::-webkit-scrollbar { 
    display: none;
}
© www.soinside.com 2019 - 2024. All rights reserved.