javascript 滚动时是否可以执行“对齐”效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11233586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to do a "snap-to" effect while scrolling?
提问by Mike Legacy
I am setting up a website like this (vertical slideshow almost):
我正在建立一个这样的网站（几乎是垂直幻灯片）：
http://mikelegacywebdesign.com/scrollpage_test/index.html
http://mikelegacywebdesign.com/scrollpage_test/index.html
The one thing I am looking to do that I can't figure out is how to make the scrolling SNAP to the point where the color change is while scrolling.
我想做但我无法弄清楚的一件事是如何使滚动 SNAP 达到滚动时颜色变化的程度。
For example, when scrolling, you get to about 50-100 px near the top of the next color you are scrolling to, it would be nice if that would snap to that point, instead of just continuing to scroll, because it is hard to get that "frame" to perfectly align. It's dependent on the user to scroll the perfect amount so that they are viewing the full frame, and not pieces of the former or next frame in the sequence.
例如，在滚动时，您会在滚动到的下一个颜色的顶部附近大约 50-100 像素处，如果它会捕捉到该点，而不是继续滚动，那就太好了，因为很难让那个“框架”完美对齐。这取决于用户滚动完美的数量，以便他们查看完整帧，而不是序列中前一帧或下一帧的片段。
Anyone that knows if there is a jQuery plugin or something for this would be my hero.
任何知道是否有 jQuery 插件或其他东西的人都会成为我的英雄。
Here is the ENTIRE page so far. It's simple coding to get the current effect:
到目前为止，这是整个页面。获得当前效果的简单编码：
<!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>
采纳答案by rodneyrehm
Yes, it's possible. Their code is quite awful though. While animating scrollTop, you'll want to make sure that additional user-input that normally leads to scrolling is ignored. Have a look at this test-caseto get an idea about how to prevent a user from scrolling.
是的，这是可能的。他们的代码虽然很糟糕。在制作动画时scrollTop，您需要确保通常会导致滚动的其他用户输入被忽略。查看此测试用例以了解如何防止用户滚动。
回答by Gonzy
You can get the desired effect using the
您可以使用
scroll() jumpScroll() scrollBy()
and a little bit of your own code.
还有一点你自己的代码。
For example,
例如，
function jumpScroll() {
window.scroll(0,250);
}
Would scroll to that point on the page
将滚动到页面上的那个点
回答by DBUK
I was after the same thing so asked a similar questiona few weeks ago. I found an addon called stellar.jsthat had the functionality but the demo was in horizontal and I couldnt for the life of me change it to vertical. Anyways, someone posted a solution, which I edited for mousescroll instead of click: http://jsfiddle.net/djsbaker/dxzk4/
几周前我也在做同样的事情，所以问了一个类似的问题。我找到了一个名为stellar.js的插件，它具有该功能，但演示是水平的，我一生都无法将其更改为垂直。无论如何，有人发布了一个解决方案，我为 mousescroll 而不是点击进行了编辑：http: //jsfiddle.net/djsbaker/dxzk4/
On a site note, I had issues with it being quite laggy with huge fixed background images. In fact very laggy, but I was using parallax which didn't mix well.
在网站注释中，我遇到了问题，因为它具有巨大的固定背景图像非常滞后。实际上非常滞后，但我使用的视差混合得不好。
