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中禁用溢出。然后在您希望能够滚动的子div中，重新启用溢出，然后将该滚动条设置为宽度为0.您还可以使用该父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视差

1 个答案: