Scroll without scrollbar CSS parallax

I am trying to design a website with a background scrolling slower than the foreground. I found a few different ways to go about doing this, and I decided on using CSS parallax. It works, however, it doesn't scroll by itself, and creates a scrollbar under my title bar. I am having trouble getting it to scroll by itself without a scrollbar. Here is a simple example of my code thus 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> &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;
}

Thank you!

Solution

So, the solution to my problem isn't too complicated. First, you have to put everything you want this to apply to into a div, and you have to disable overflow in that div. Then in the child divs which you want to be able to scroll, you re-enable overflow, then you set that scrollbar to have a width of 0. You can also use that parent div to solve position problems such as the ones I ran into.

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;
}