HTML中Javascript失效：视差网站滚动无效果，报pageYOFFset未定义错误

错误原因 #

你代码里的window.pageYOFFset是拼写错误，正确的属性名是window.pageYOffset——把大写的OFF改成小写的Off即可解决这个引用错误。

修正后的完整代码 #

同时补上layer2的视差逻辑，让两个图层都能按预期滚动：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
body {margin:0;
    padding:0;}
.zoom{
    width:100%;
    height: 1000px;
    position:relative;
    overflow:hidden;
    background:url(/Users/reinh/Downloads/bg\ \(2\).jpg);
    background-size: cover;
}
.zoom:before{
    content:'';
position:absolute;
bottom: 0;
width: 100%;
height: 200px;
z-index: 1000;
background:linear-gradient(transparent,#fff);

}

.zoom #layer1{
    position:absolute;
    left:40%;
    width: 100%;
    transform: translateX(-50%);
    z-index:10;

}
.zoom #layer2{
    position:absolute;
    right: 0;
    width: 100%;
    z-index:9;
}
.zoom #text

{
    position:absolute;
    right: 0;
    width: 100%;
    transform: translateY(50%);
}
.content { 

    padding: 100px;
    box-sizing: border-box;
    font-family: consolas;
}
 .content h2 {
margin:0;
padding:0;
font-size:4em;

 }
 .content p{
    font-size: 1.2em;
 }

    </style>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Johnathan Reinhart </title>
</head>
<body>
    <section class="zoom">
        <img src="/Users/reinh/Downloads/mountain1.png" id="layer1">
        <img src="/Users/reinh/Downloads/mountain2.png" id="layer2">
        <img src="/Users/reinh/Downloads/text.png" id="text">
    </section>
    <section class="content">
        <h2> Simple Background paralax place holder text!</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur molestias placeat ad nihil expedita accusamus nulla laudantium eveniet dolore molestiae! Sed commodi minima aut laboriosam dolorem voluptates eaque asperiores nulla.
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis vel perspiciatis ad provident. Velit provident laborum accusamus unde error illum harum repellat iure deserunt ad perspiciatis, porro dignissimos sapiente odio! 
            <br>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni voluptatum similique tenetur rerum expedita illum optio, temporibus voluptate doloremque accusamus, eaque repudiandae mollitia voluptatem dicta vero id minima. Tempora, nulla.
        </p>

    </section>
    <script type="text/javascript">
        var layer1 = document.getElementById("layer1")
        var layer2 = document.getElementById("layer2")
        let scroll = window.pageYOffset;
        document.addEventListener('scroll', function (e) {
            var offset = window.pageYOffset;
            scroll = offset;
            // layer1 宽度缩放效果
            layer1.style.width = (100 + scroll/5)+ '%' ;
            // layer2 水平位移视差效果
            layer2.style.transform = `translateX(${scroll/10}px)`;
        }); 
    </script>
</body>
</html>

额外说明 #

1. 除了修正拼写错误，还添加了layer2的DOM获取和水平位移逻辑，你可以调整scroll/10里的数值控制layer2的移动速度，数值越大移动越快。
2. 给初始的scroll变量添加了let声明，避免全局变量污染。
3. 若需要layer2做垂直位移，把translateX改成translateY即可，调整对应数值控制速度。

内容的提问来源于stack exchange，提问作者Pythaes From the Onion patch