问题标签 [skrollr]

我创建了一个简单的页面来尝试在相对模式下使用 Skrollr。我设置了 2 个部分，第一个部分有一个标签，第二个部分有一个

标记在里面。当第一部分的底部位于视口顶部时，第一部分应该淡出。但不是使用该部分，而是使用标签来触发动画。

第二部分也有一个背景 div，该动画应该是平面图像从顶部 100px、中心 0px 和底部 -100px 开始。该图像似乎始终位于 -100px 的位置。

CSS：

我确定我看多了一些明显的东西..但我似乎无法弄清楚它可能是什么。我上传了一个简单的日期来演示我在说什么。我在这里先向您的帮助表示感谢！

演示链接

我正在使用 skrollr.js 和 skrollr-menu 来创建视差网站。我有 3 个带有嵌套元素的 div，我想以不同的速度进行视差。在桌面上一切正常，但在运行 iOS 7 的 iPad 上，我遇到了元素定位方式和滚动速度的问题。3个不同的div有一个位置类：固定，嵌套元素有一个位置类：绝对；并使用 top:px 定位在 Y 轴上（尝试使用 % 而不是混合结果）。其他（非嵌套，即#content）div似乎在所有浏览器和设备上都可以一致地工作。我真的很感谢这个问题的任何帮助，它已经让我发疯了好几天，这是我第一个使用 skrollr 的项目，所以我没有太多经验，但到目前为止，我很喜欢它，除了 iOS 上的这个小故障，我已经检查了 stackOverflow 中的文档和相关问题，但仍然没有运气！希望有人能够为我指出正确的方向，这是我如何尝试实现这一点的一个小技巧，尽管要在 iOS 中看到它，我很快就必须提供指向该项目的直接链接，请多多包涵，因为我有移植现有项目以在移动设备上将其与 skrollr 一起使用，因此我想在提交之前尽可能多地清理代码以避免混淆，同时这里是小提琴：

$(document).ready(function(){ var s = skrollr.init({ forceHeight: false, smoothScrolling: true, smoothScrollingDuration: 150 });

}); });

http://jsfiddle.net/shinobisan/EvPdL/6/

谢谢！！

我有一个简单的网站，有 2 个部分，其中包含少量内容和背景图片。在我添加 id skrollr-body 标签之前，一切似乎都正常，但现在由于该 ID 现在包含我的所有内容，100% 的高度不再有效。我尝试使用 100vh 属性，但这似乎也不起作用。这似乎只是 iPad 上的一个问题，我知道这是因为 Skrollr 在 ios 设备上处理滚动的方式。我不知道如何将内容部分强制为视口的 100% 并且仍然让 Skrollr 在移动设备上工作。

这是我正在谈论的内容的简单演示

如果您碰巧读到了这篇文章，感谢 Prinzorn 的帮助！

关联

假设窗口高度为 768 像素，内容高度为 1080 像素，并且：

当我滚动到底部时，由于 winHeight < contentHeight，部分内容没有显示。我能为此做些什么？

是否可以在绝对模式下使用滚动条定位元素的底部？

现在，如果我有一个比视口更大的元素，那么我不确定如果是视口，我如何使元素锚定到底部。我可以用

我想弄清楚当元素的高度大于视口的高度时，是否有办法将元素的底部锚定到视口的底部。如果这个布局是响应式的，我想使用 % 而不是 px，但是考虑到这个想法，有问题的元素标签的高度是一个移动的目标。到目前为止，我在测试想法方面没有运气。

谢谢！

我可以使用 skrollr 插件（http://prinzhorn.github.io/skrollr/）延迟滚动后背景的移动吗？

我写了这段代码，用于测试：

它工作得很好，但我想在滚动后延迟背景移动......有可能吗？谢谢！！

所以我是 Skrollr 的新手，我正在尝试理解 Skrollr 的位置。

现在由于某种原因，我的 data-start / data-top 进度条在页面结束之前很久就完成了。

这是 JSFiddle - http://jsfiddle.net/t8bZy/2/

这是有问题的代码行。

有人可以告诉我为什么酒吧过早结束吗？

我有一个使用 skrollr 和 skrollr 菜单的网站。在我添加 skrollr 之前，每次按下导航按钮时我都会清理 url。添加 Skrollr 菜单后，URL 的清理似乎不起作用。这是我在我的 js 文件中的代码。

这在我添加 Skrollr 菜单之前再次起作用。知道 Skrollr 菜单旁边的代码是什么吗？

谢谢！

我不确定我想做的事情是否可以使用 skrollr，这似乎是不可能的，但也许我误解了。我希望能够描述相对于其他关键帧事件的滚动点中的关键帧，例如“在另一个元素的动画事件之后 500px 开始这个动画事件”，并想知道最佳实践是什么。我正在处理包含多个动画内容部分的大页面。每个部分都滚动到顶部，然后随着在该部分中的许多关键帧上出现多个动画而暂时固定，然后一旦该部分的动画完成，它就会向上滚动到屏幕之外，下一个部分进入视图并执行它自己的动画，并且依此类推（与主要的skrollr 演示不同）但更复杂的动画事件更多）。我的主要问题是我希望能够在未来轻松地独立编辑每个部分的动画时间，例如根据需要在这里和那里调整一些小细节，期待与我的艺术家和客户的一些来回一起工作。但是，当所有时间都依赖绝对值时scrollTop，这会变得有问题，因为一点点时间变化意味着我必须在页面的其余部分调整所有后续时间。为了解决这个问题，我使用常量来表示每个动画部分的开始，这样至少我可以让每个动画部分相对于它的开始进行计时，如下所示：

但即便如此，对于复杂的序列，进行小的时间更改会有点混乱，至少需要更改该部分中的所有关键帧偏移量，并且可能还需要更改常量值。看看我上面的例子，有两个问题：

1) 有没有办法描述一个相对关键帧，比如说，在 section#fixedanimatedcontent2的 top=0% 之后 500px 开始？我知道我可以做到data-top，但是在我的设置#fixedanimatedcontent2中，一旦达到顶部，它就会在顶部固定一段时间。那么如何描述一个我想要在#fixedanimatedcontent2点击后开始滚动 500 像素的关键帧data-top呢？这在“相对关键帧”的语法中是不可能的，因为偏移量仅相对于视口中的元素位置？如果这以某种方式可行，我就不必如此依赖常量......

2) 当 section 的不透明度达到 1 时开始的关键帧怎么#fixedanimatedcontent2样<img>？这样，我以后可以在需要更改<img>不透明度插值的长度时，而不必更改所有后续关键帧时间。很确定这是不可能的，但不得不问......

那么：我是否误解了最有效地进行这种相对测序的最佳方法是什么？还是使用上面示例中的常量是最佳实践？

（这是一个非常冗长的帖子，对不起！）

在我网站上的某些元素上使用 skrollr 时遇到一些问题。它适用于背景，但我试图淡入和淡出带有文本的 div，但它不起作用......我一定做错了什么，所以我创建了一个 jsfiddle 来显示这个问题。希望有人知道我做错了什么。

代码

CSS

这里的例子

谢谢