Question

我正在学习如何使用Skrollr.js library。使用DOM中的滚动条来操纵网站外观的绝佳工具。它确实有一个陡峭的学习曲线，以确切了解它是如何工作的。我正在玩一个简单的样本。我有一个图像，我希望在背景屏幕上停留500％的垂直高度。我有其他文本项目，我想在前台滚动。我想做一个测试，让其中一个文本项淡入淡出。

有用的参考资料：Classic Parallax Scrolling Example和I Hate Tomatoes Example

我在position: fixed;位置加载的div中有一个图像，<div id="skrollr-body">下面的滚动区域中有几个div我有一个文本标题我想淡入零因为我使用滚动条。注意：我没有任何参数就启动了skrollr.init（）。另外，我根本不使用jQuery。

我的问题是它在Chrome上运行不正常，并且在Firefox浏览器上工作正常。我不知道为什么？

我已经创建了一个jsFiddle来展示这个问题。 http://jsfiddle.net/q3z3v6op/4/小提琴和我的测试程序一样; Chrome上有片状，在Firefox上没问题。查看Chrome开发工具时，您可以很容易地看到红框文本不透明度值正在正确地更改为零，因为框朝向显示屏的顶部，但实际显示在大多数时间内都不会消失。如果我转到Chrome开发工具，打开抽屉（控制台/搜索/模拟/渲染选项卡所在的位置），然后选择“渲染”，我就可以开始工作了。然后单击[]启用连续页面重绘。

还有人来过这里吗？有什么想法，这个问题是怎么回事？非常感谢。

Answer 1

我更新了你的小提琴。这是一种不同的方法，但它应该更兼容跨浏览器。我猜Chrome不喜欢display: block和opacity: 0。这看起来像一个bug。我在Safari（也是WebKit）上测试过，它没有问题。通过使用inline-block，我能够修复Chrome上的错误。

http://jsfiddle.net/christianjuth/q3z3v6op/5/

固定代码：

.hsContent {
    display: inline-block;
    position: absolute;
    left: 50%;
    width: 400px;
    margin-left: calc(-200px - 8%);
    color: #ebebeb;
    padding: 0% 8%;
    text-align: center;
}

Skrollr使用Chrome浏览器进行故障排除

1 个答案: