时间戳

首页 > 解决方案 > CSS Parallax overflow-y:scroll 让它消失

html - CSS Parallax overflow-y:scroll 让它消失

问题描述

我已经成功制作了纯 CSS视差，这很难！^^

但我有一个问题。

要进行视差，我们必须overflow-y : scroll适当地从上到下滚动具有透视适当性的块。

问题是它迫使我添加一个丑陋的滚动条，我怎么能删除它？

谢谢 ！:)

这是我的片段：

*{box-sizing: border-box;}

body{
    margin: 0;
}

.parent{
    perspective: 200px;
    perspective-origin: bottom right;
    height: 100vh;
    overflow-y: scroll;
}

.parent:before{
    content:'';
    position: absolute;
    background: linear-gradient(white, #A00000);
    height: 300vh;
    width: 100vw;
}

section{
    height: 50vh;
    transform-style: preserve-3d;
}

span{
    background: url('https://image.flaticon.com/icons/png/512/248/248983.png') no-repeat;
    height: 100%;
    width: 100%;
    position: absolute;
}

.firstChild{
    transform: translateZ(-200px);
}

.secondChild{
    background: url('https://image.flaticon.com/icons/png/512/248/248983.png') no-repeat;
    transform: translateZ(-100px) ;
}

.secondChild{
    transform: translateZ(-300px) ;
}
<!DOCTYPE html>
<html>
<head>
    <title>title</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1> My website is not awesome.</h1>
    <div class="parent">
        
        <section><span class="firstChild"></span></section>
        <section><span class="secondChild"></span></section>
        <section><span class="thirdChild"></span></section>
        

    </div>
</body>
</html>

标签： htmlcssparallax

解决方案

将此添加到您的 css 以使滚动条不可见：

.parent::-webkit-scrollbar {
  display: none;
}

推荐阅读