Javascript 每20像素更改一次img源

我想在向下滚动每20个像素时更改一个img src，因此从顶部向下滚动100个像素时，它应该已经更改了5次，实际的src图像应该是“falling-05.png”。多亏了其他教程，我做到了这一点，但在测试时，它似乎无法正常工作。有人能帮我找出原因吗

HTML

JAVASCRIPT

var image = document.getElementById("character");
var sources = ["falling-01.png", "falling-02.png", "falling-03.png", "falling-04.png", "falling-05.png", "falling-06.png", "falling-07.png", "falling-08.png", "falling-09.png"];

var i = 0;
var breakpoint = 20;                           // Change to whatever you like

window.addEventListener("scroll", function() {
var scrollDown = document.body.scrollTop;
if (scrollDown >= breakpoint) {
   img.setAttribute(src, sources[i]);
   breakpoint += 20;                       //Change to whatever you like
   i++;
}
}

首先，您有一个输入错误：

var image = document.getElementById("character"); <-- defined as image
img.setAttribute(src, sources[i]); <-- referenced as img

但在代码中，可滚动的部分不是主体

.fixedContainer {
  ...
  overflow-y: scroll;
}

首先，您有一个输入错误：

var image = document.getElementById("character"); <-- defined as image
img.setAttribute(src, sources[i]); <-- referenced as img

但在代码中，可滚动的部分不是主体

.fixedContainer {
  ...
  overflow-y: scroll;
}

---

您的语法有几个问题：

• 缺少结尾括号

• img

  和

  image

• src

  而不是

  'src'

• 显示：在
  中。另一个容器

如果您使用

window.pageYOffset

而不是

document.body.scrollTop

它应该可以工作

你可以用

var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : 
(document.documentElement || document.body.parentNode || 
document.body).scrollTop;

---

如中所述，您的语法存在一些问题：

• 缺少结尾括号

• img

  和

  image

• src

  而不是

  'src'

• 显示：在
  中。另一个容器

如果您使用

window.pageYOffset

而不是

document.body.scrollTop

它应该可以工作

你可以用

var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : 
(document.documentElement || document.body.parentNode || 
document.body).scrollTop;

---

如中所述。

什么工作不正常？因为没有每向下滚动20个像素更改img src hehehe@Epscarello您调试了吗？console.log（）是您的朋友。控制台中的错误消息是什么？什么是

img

？出现的唯一错误是完成js文件，没有更改。现在也没有错误@epascarello创建了一个JSFIDLE来检查是否是我的计算机或html文件，仍然只显示第一个图像：（@epascarello什么工作不正常？因为没有每20个像素向下滚动一次更改img src hehehe@epascarello调试了吗？console.log（）是您的朋友。您的控制台中的错误消息是什么？什么是

img

？出现的唯一错误是使用完成js文件），完成了，没有更改。没有错误，现在@epascarello创建了一个JSFIDLE来检查是我的计算机还是html文件，仍然只显示第一个图像：（@epascarello不确定我是否理解你告诉我的内容。我已经全部应用了：将img var更改为image以匹配代码底部的请求。结尾处用括号括起来，更改了scrollDown var=window.pageYOffset仍然不起作用：（@avocado@user2875178看见（在滚动之前，单击输出框右上角的

run with js

按钮）不确定我是否理解你告诉我的内容。我已经全部应用了：将img var更改为image以匹配代码底部的请求。结尾处的圆括号关闭，更改的scrollDown var=window.pageYOffset仍然不起作用：( @avocado@user2875178请参阅（滚动前，单击输出框右上角的

runwithjs

按钮）