当用户滚动<section>时，是否可以更改背景颜色？

Question

我正在制作这个网站，我正在构建的网站。

在桌面上，网站正常工作，但当我在移动设备上尝试时，它不喜欢我使用的snap scroll插件。所以我找到了另一个插件。单页滚动演示。

问题在于，one page scroll jQuery使用的部分技术上在页面上滚动。因此，这会破坏我的淡入资产和渐变背景。它们在技术上低于折叠并向上滚动。渐变背景根据2000px高度页面上的位置而改变。

太长没看？：有没有可能根据在单个页面上滚动的内容而不是页面本身滚动来更改背景颜色？我一直在想，也许通过在内容后面放置可滚动的div来实现？

- piechart

Answer 1

无论是什么触发了移动，你也可以触发样式更改。但我怀疑那看起来不好。

你可能想做的是将每个部分放在自己的div中，并为每个div指定自己的颜色。

- ChadF

---

有没有一种方法可以给每个区段分配自己的颜色，然后在滚动时平稳地过渡颜色变化？ - piechart

我已经上传了新方案的版本，目前它正在工作中 新架构的暂存版本。 - piechart

你想让它们在你向下滚动时像渐变一样过渡吗？而不是像单页滚动演示中那样明显不同的部分？ - ChadF

在我的手机上，颜色变化得很好。但它似乎会不规则地跳动。你在移动设备上使用的是什么？ - ChadF

我之前使用了SCROLLSNAP，在电脑上运行良好，但在移动设备上会出现反弹的问题。因此，我转而使用ONE PAGE SCROLL。请查看我的One Page scroll应用。 - piechart

Answer 2

你可以考虑使用fullPage.js代替。

它提供了选项scrollBar:true（以及许多其他选项），因此您的动画将如预期般继续工作。 这里有演示。

- Alvaro

---

这看起来很有前途。但我似乎无法弄清楚如何将其集成到我的网站中。对于我这个脑袋不大的人来说，它毫无意义。 - piechart

好的，我有点让它工作了，然后意识到它和我的第二个实现有相同的问题。这是在静止页面上滚动内容，所以它仍然破坏了我的渐变背景和淡入效果。 - piechart

@piechart，如果您使用选项scrollBar:true，在滚动时触发操作不应该有任何问题。当您说“这是在静止页面上滚动的内容”时，我不太确定您的意思。 - Alvaro

好的！我完全明白你的意思了，而且我已经让它正常工作了。在移动设备上看起来也很不错。但是在手机上运行非常缓慢。捕捉需要几秒钟才能追上。有什么想法吗？ - piechart

好的，看起来问题的一部分是因为在手机上顶部的URL栏存在，所以它会计算打开栏时容器的大小，但是当栏折叠时，容器保持与打开栏时设置的相同大小，因此下一节的一点点内容会出现。 - piechart

@piechart 目前还没有合适的解决方案。移动浏览器没有提供处理这些情况的方法。 - Alvaro