I'm working on creating a website where the background scrolls slower than the foreground. After exploring different options, I settled on using CSS parallax for this effect. It's working as intended, but there's one issue - it doesn't scroll automatically and instead creates a scrollbar below my title bar. I'm struggling to figure out how to make it scroll smoothly without the presence of a visible scrollbar. Here's a snippet of the code I've put together so far:
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>  
<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;
}
Any suggestions or assistance would be greatly appreciated!