滚动不带滚动条 CSS 视差

Question

我正在尝试设计一个背景滚动速度比前景慢的网站。我找到了几种不同的方法来做这件事，我决定使用 CSS 视差。它可以工作，但是它不会自行滚动，而是在我的标题栏下创建一个滚动条。我无法让它在没有滚动条的情况下自行滚动。到目前为止，这是我的代码的一个简单示例。

index.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <title>Title</title>
        <link rel="icon" type="image/png" href="icon.png">
        <div id="top">
            <img src="icon.png" alt="Icon" 
style="width:150px;height:150px;">
            <nav>
                <a href="index.html">Home</a> &nbsp
                <a href="b.html"/>B</a>
            </nav>
        </div>
    </head>
    <body>
        <div class="parallax">
            <div class="parallax__layer parallax__layer--back">
                <img src="apt.jpg" alt="Apartment">
            </div>
            <div class="parallax__layer parallax__layer--base">
                <h1>Welcome!</h1>
                <p>Sample Text</p>
        </div>
    </div>
</body>

css/style.css

.parallax
{
    -webkit-perspective: 1px;
    perspective: 1px;
    height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: -1;
}
.parallax__layer
{
    position: absolute;
    overflow: auto;
    right: 0;
    left: 0;
}
.parallax__layer--base
{
    top: 150px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    margin-left: 15%;
    margin-right: 15%;
}
.parallax__layer--back
{
    -webkit-transform: translateZ(-1px);
    transform: translateZ(-1px) scale(2);
}

nav
{
    position: fixed;
    top: 0px;
    z-index: 3200;
    font-size: 40px;
    top: 55px;
    right: 30px;
}

a
{
    text-decoration: none;
    color: red;
}

h1
{
    color: red;
}

p
{
    color: red;
}

div
{
    background-color: 2f2f2f;
}

#top
{
    position: fixed;
    top: 0;
    left: 0;
    height: 150px;
    width: 100%;
    background-color: 3c3c3c;
}

谢谢！

Answer 1

所以，我的问题的解决方案并不太复杂。首先，你必须将你想要应用的所有内容都放入 div 中，并且你必须在 div 中禁用溢出。然后在你想要滚动的 child divs 中，你 re-enable 溢出，然后你设置滚动条的宽度为 0。你也可以使用 parent div 来解决位置问题，例如我运行遇到的问题。

index.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Title</title>
    <link rel="icon" type="image/png" href="icon.png">
    <div class="navbar">
        <img src="icon.png" alt="Red Star" style="width:150px;height:150px;">
        <nav>
            <a href="index.html">Home</a> &nbsp
            <a href=b.html/>B</a>
        </nav>
    </div>
</head>
<body>
    <div class="base">
        <div class="parallax">
            <div class="parallax-layer parallax-back">
                <img src="apt.jpg" alt="Apartment">
            </div>
            <div class="parallax-layer parallax-base">
                <h1>Welcome to the website!</h1>
                <p>Sample text!</p>
            </div>
        </div>
    </div>
</body>

.parallax::-webkit-scrollbar { 
    width: 0;
}

.base
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}
.navbar
{
    position: fixed;
    top: 0;
    left: 0;
    height: 150px;
    width: 100%;
    background-color: 3c3c3c;
    z-index: 3200;
}

.parallax
{
    width: 100%;
    -webkit-perspective: 1px;
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: -1;
}
.parallax-layer
{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}
.parallax-base
{
    top: 175px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    margin-left: 15%;
    margin-right: 15%;
}
.parallax-back
{
    width: 100%;
    top: 150px;
    -webkit-transform: translateZ(-3px);
    transform: translateZ(-3px) scale(4);
}

nav
{
    position: fixed;
    top: 0px;
    z-index: 3200;
    font-size: 40px;
    top: 55px;
    right: 30px;
}

a
{
    text-decoration: none;
    color: red;
}

h1
{
    color: red;
}

p
{
    color: red;
}

div
{
    background-color: 2f2f2f;
}

滚动不带滚动条 CSS 视差

Scroll without scrollbar CSS parallax

html

css

parallax