Question

我正在建立一个这样的网站（几乎是垂直幻灯片）：

http://mikelegacywebdesign.com/scrollpage_test/index.html

我想要做的一件事我无法弄清楚如何使滚动SNAP到滚动时颜色变化的点。

例如，滚动时，在滚动到的下一个颜色的顶部附近大约需要50-100像素，如果它会捕捉到那一点，而不是仅仅继续滚动，那将是很好的，因为它很难让“框架”完美对齐。这取决于用户滚动完美的数量，以便他们正在查看整个帧，而不是序列中的前一帧或下一帧的片段。

任何知道是否有jQuery插件的东西都是我的英雄。

到目前为止，这是整个页面。获得当前效果的编码很简单：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Scrollpage Test</title>

<style type="text/css">

    html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
    .container { height: 400%; width: 100%; }
    .section { height: 35%; width: 100%; }

    #section1 { background-color: #1d9ad7; }
    #section2 { background-color: #c83e3d; }
    #section3 { background-color: #75b946; }
    #section4 { background-color: #f4be2f; }

</style>
</head>
<body>
<div class="container">
    <div class="section" id="section1"></div>
    <div class="section" id="section2"></div>
    <div class="section" id="section3"></div>
    <div class="section" id="section4"></div>
</div>
</body>
</html>

Answer 1

是的，它是possible。他们的代码非常糟糕。动画scrollTop时，您需要确保忽略通常导致滚动的其他用户输入。请查看此test-case以了解如何阻止用户滚动。

Answer 2

您可以使用

获得所需的效果

scroll() jumpScroll() scrollBy()

以及一些你自己的代码。

例如，

function jumpScroll() {
    window.scroll(0,250);
}

将滚动到页面上的那一点

Answer 3

几周前，我在asked a similar question发生了同样的事情。我找到了一个名为stellar.js的插件，它具有功能但是演示处于横向状态，我无法将其改为垂直。无论如何，有人发布了一个解决方案，我为mousescroll编辑而不是点击：http://jsfiddle.net/djsbaker/dxzk4/

在一个网站上，我遇到的问题是它有很大的固定背景图像。事实上非常迟钝，但我使用的视差并不好。

滚动时是否可以进行“对齐”效果？

3 个答案: