这是我的代码。我是一个全新的编码，并试图建立一个parralax网站。基本上它应该移动layer1，滚动后layer2。但是，我运行的Javascript是不工作。在开发人员工具，它运行的错误代码：“未捕获引用错误窗口。未定义pageYOFFset。我尝试自己修复它，但我不知所措。如果能解释我做错了什么，我将不胜感激。谢谢
<!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")
scroll= window.pageYOFFset;
document.addEventListener('scroll',
function (e) {
var offset = window.pageYOFFset;
scroll = offset;
layer1.style.width = (100 + scroll/5)+ '%' ;
});
</script>
</body>
</html>我希望Layer1和Layer2在滚动时沿着各自的轴移动。但是什么也没发生。我绝对100%确定我的doe是好的，所以我尝试了不同的语法，并检查以确保Javascript在我的浏览器中启用。没有修复
1条答案
按热度按时间gcuhipw91#
你是说window.pageYOffset吗？
按照惯例，javascript对所有内容都使用驼峰式表示法，甚至vsCode也应该给予您要编写的属性。