javascript - 滚动时是否可以执行 "snap-to"效果?

标签 javascript jquery html jquery-plugins

我正在建立一个这样的网站(几乎是垂直幻灯片放映):

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

我想要做但我想不通的一件事是如何使滚动捕捉到滚动时颜色变化的点。

例如,滚动时,您会到达下一个要滚动到的颜色顶部附近的大约 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>

最佳答案

是的,是possible .他们的代码虽然很糟糕。在为 scrollTop 设置动画时,您需要确保忽略通常会导致滚动的其他用户输入。看看这个test-case了解如何防止用户滚动。

关于javascript - 滚动时是否可以执行 "snap-to"效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11233586/

相关文章:

html - Bootstrap 3 : Missing gutters

javascript - 我可以在另一个 setTimeout 的处理程序中有一个 setTimeout 吗?

javascript - 检查列表元素是否具有类时需要单击两次

javascript - 输入后立即获取变量

css - 检测屏幕分辨率

javascript - ASP.NET - 将数据从我的模型获取到 JavaScript 变量中并使用所述变量填充文本区域

javascript - Firefox 中的拖动事件没有 e.clientX 或 e.clientY

javascript - 是否有可以用作库的 V8 CommonJS 实现?

javascript - 如何在函数中创建一个等于 this 的 jquery id 选择器?

ajax - 为什么这个 jQuery Ajax 请求失败?