滚动驱动视差效果异常：Moon元素无滚动响应问题排查

问题描述 #

制作视差滚动网站时，编写到moon.style.left = value * 1.05 + 'px';代码后，Moon元素无法随页面滚动滑动，无报错提示，尝试修改left为top、调整数值均无效，元素始终静止。

错误原因分析 #

1. 变量大小写不匹配：JavaScript是大小写敏感语言，代码中声明的变量为Moon，但滚动事件里使用的是小写moon，导致无法定位到目标元素，样式修改失效。
2. API拼写错误：获取front_mountains元素时，误写为document.getElementId，正确应为document.getElementById（少了一个字母d），导致变量未正确获取元素。
3. 其他变量大小写不一致：如Text与text、Btn与btn等，同样存在大小写不匹配问题，导致对应元素的样式修改无法生效。

修正后的完整代码 #

CSS代码 #

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(#01789c, #1c0130);
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 30px 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10000;
}

header .logo {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 2px;
}

header ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

header ul li {
  list-style: none;
  margin-left: 20px;
}

header ul li a {
  text-decoration: none;
  padding: 6px 15px;
  color: #fff;
  border-radius: 20px
}

header ul li a:hover,
header ul li a.active {
  background: #fff;
  color: #2b1055;
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

section::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to top, #1c0522, transparent);
  z-index: 1000;
}

section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

section img#moon {
  mix-blend-mode: screen;
}

section img#mountains_front {
  z-index: 10;
}

#text {
  position: absolute;
  color: #fff;
  white-space: nowrap;
  font-size: 7.5vw;
  z-index: 9;
}

#btn {
  text-decoration: none;
  display: inline-block;
  padding: 8px 30px;
  border-radius: 40px;
  background: #fff;
  color: #2b1055;
  font-size: 1.5em;
  z-index: 9;
  transform: translateY(100px);
}

.sec {
  position: relative;
  padding: 100px;
  background: #1c0522;
}

.sec h2 {
  font-size: 3.5em;
  margin-bottom: 10px;
  color: #fff;
}

.sec p {
  font-size: 1.2em;
  color: #fff;
}

HTML与JavaScript代码 #

<!doctype html>
<html>

<head>
  <title>Parallax Scrolling Website | Vanilla Javascript</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <header>
    <a href="#" class="logo">Logo</a>
    <ul>
      <li><a href="#" class="active">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Sources</a></li>
    </ul>
  </header>
  <section class="parallax-section">
    <img src="Background (1).png" id="background">
    <img src="Back Mountains.png" id="back_mountains">
    <img src="Front Mountains.png" id="front_mountains">
    <img src="Moon.png" id="moon">
    <img src="Ocean.png" id="ocean">
    <h2 id="text">Moon Light</h2>
    <a href="#sec" id="btn">Explore</a>
    <img src="Weird land_.png" id="weird_land">
  </section>
  <div class="sec" id="sec">
    <h2>Parallax Scrolling Effects</h2>
    <p>Something Something Something <br><br> Something Something Something</p>
  </div>

  <script>
    let background = document.getElementById('background');
    let back_mountains = document.getElementById('back_mountains');
    let front_mountains = document.getElementById('front_mountains');
    let moon = document.getElementById('moon');
    let ocean = document.getElementById('ocean');
    let text = document.getElementById('text');
    let btn = document.getElementById('btn');
    let weird_land = document.getElementById('weird_land');

    window.addEventListener('scroll', function() {
      let value = window.scrollY;
      moon.style.left = value * 1.05 + 'px';
      back_mountains.style.top = value * -1.25 + 'px';
      front_mountains.style.top = value * .5 + 'px';
      text.style.marginTop = value * 2 + 'px';
    })
  </script>

</body>

</html>

关键修正点 #

• 统一变量名大小写：将所有元素变量改为小写（如Moon改为moon），与滚动事件中使用的变量名保持一致。
• 修正API拼写错误：将document.getElementId改为document.getElementById，确保正确获取front_mountains元素。

内容的提问来源于stack exchange，提问作者user23896416