jquery - 滚动条 : Output looks different although I use the same code as the example

Question

我正在关注 Skrollr 网站上的第一个基本示例。 这是他们的例子:http://prinzhorn.github.io/skrollr/examples/docu/1.html

因此，我使用查看源代码并将代码复制到我的 codepen.io 中以学习和使用它:http://codepen.io/Chiz/pen/JYvxOv

现在，这是 super 奇怪的神秘事情:虽然代码是相同的(响应代码部分是我唯一没有复制的部分)，但“WOOOT”上的蓝色条并没有出现在我的代码中。此外，他们的示例有一个垂直滚动条，而我的没有。

这里发生了什么？我在他们的示例中没有看到任何 CSS 或指向任何 CSS 文件的链接，所以我假设他们可能有一些后端服务器技术可以以某种方式即时更改该示例文件并神奇地为其提供额外的 CSS 属性和其他代码，我不知道不知道。

$(document).ready(function() {
  var s = skroll.init();
});

<div id="skrollr-body">
  spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>spacer
  <br>
  <div id="foo" data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>
</div>

Answer 1

哦，它在那里，但你已经添加了一些超出原始示例的旋转内容。转到您的代码笔，然后慢慢滚动 html 输出屏幕。

这是您添加的额外内容:

<div data-0="background-color:rgb(0,0,255);
             transform[bounce]:rotate(0deg);" 
     data-top="background-color:rgb(255,0,0);
               transform[bounce]:rotate(360deg);">
    WOOOT
</div>