Javascript 为什么身体元素需要高度来实现视差滚动？_Javascript_Css_Typescript_Parallax

Javascript 为什么身体元素需要高度来实现视差滚动？

javascript css typescript

Javascript 为什么身体元素需要高度来实现视差滚动？,javascript,css,typescript,parallax,Javascript,Css,Typescript,Parallax,我一直在尝试用js和css创建视差滚动。一切正常，但我有一行代码，我需要，但我不知道为什么。工作代码如下所示 CSS Javascript 它不再起作用了。为什么会这样提前谢谢。这不是CSS，顺便说一句。很抱歉，这是个错误。这是一种讽刺，但不是复杂的讽刺 /// Block Element /// @access public /// @param {String} $element - Element's name @mixin element($element) { &__

我一直在尝试用js和css创建视差滚动。一切正常，但我有一行代码，我需要，但我不知道为什么。工作代码如下所示

CSS Javascript 它不再起作用了。为什么会这样

提前谢谢。

这不是CSS，顺便说一句。很抱歉，这是个错误。这是一种讽刺，但不是复杂的讽刺

/// Block Element
/// @access public
/// @param {String} $element - Element's name
@mixin element($element) {
    &__#{$element} {
        @content;
    }
}

/// Block Modifier
/// @access public
/// @param {String} $modifier - Modifier's name
@mixin modifier($modifier) {
    &--#{$modifier} {
        @content;
    }
}


.body {
    height: 2000px;
}
.layer {
    width: 100%;
    height: 800px;
    position: fixed;
    //z-index: -1;
    background-color: pink;

    @include element('1') {
        background-color: blue;
    }

    @include element('2') {
        background-color: red;
    }

    @include element('3') {
        background-color: green;
    }
}

import "./index.scss";
import "./bootstrap/css/bootstrap.min.css";
window.onload = function () {
    let layers = window.document.querySelectorAll(".layer")
    console.log("Layers: " + layers);
    window.addEventListener("scroll", (event) => {
        let topDistance = window.pageYOffset;
        for (let i = 0; i < layers.length; i++) {
            let layer = <HTMLElement>layers[i];
            let depth = layer.dataset["depth"];
            let movement = -(topDistance * Number(depth))
            let translate3d = 'translate3d(0, ' + movement + 'px, 0)';
            layer.style['-webkit-transform'] = translate3d;
            layer.style['-moz-transform'] = translate3d;
            layer.style['-ms-transform'] = translate3d;
            layer.style['-o-transform'] = translate3d;
            layer.style.transform = translate3d;
        }
    });
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Introduction to web development blog </title>
    <link href="https://fonts.googleapis.com/css?family=Bungee+Shade|Oswald|Raleway" rel="stylesheet">
    <script src="bundle/index.js"></script>
</head>
<body class="body">
    <div class="hero">
        <h1>Boom</h1>
        <div class="layer layer__1" data-type="parallax" data-depth="0.5"></div>
        <div class="layer layer__2" data-type="parallax" data-depth="0.1">
            <h1>Layer 2</h1>
        </div>
        <div class="layer layer__3" data-type="parallax" data-depth="0.2"></div>

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

.body {
    height: 2000px;
}