垂直滚动捕捉/对齐到div / element / anchor [英] Vertical scrolling with snap/align to div/element/anchor

问题描述

我找到了一些可爱的网站 - http://www.mini.jp/event_campaign/big点/ ， http://www.twenty8twelve.com/ 和 http://www.scozzese.com - 所有垂直滚动，所有使用的技术将'页面'对齐浏览器，当你滚动到一个新的'页面' - 即使你滚动到一半。

任何人都可以给我任何指针例如正确的术语/单词我可以用来搜索更多的信息，或简单介绍这项技术背后的基础知识，或者如果有任何jQuery插件存在，我可以玩和学习？

我做了他们的代码搜索，但没有跳出去如何做，我的Javascript和jQuery仍然是新手级别。

JavaScript有一些本地方法，如 scroll（），scrollTo（），scrollBy（），这可以用来平滑地滚动页面。与 offsetTop（），offsetLeft（）一起，您可以获得类似于这些网站的效果。

很多jQuery插件（例如像谷歌命中）为您节省很多这方面的工作。

只要搜索这些Methodnames，这应该给你足够的点击我猜。

I found some lovely websites - http://www.mini.jp/event_campaign/big-point/, http://www.twenty8twelve.com/ and http://www.scozzese.com - all vertical scrolling, and all using a technique that aligns the 'pages' to the top of the browser when you scroll onto a new 'page' - even if you scroll half way into one.

Could anyone give me any pointers e.g. the right terminology/words I could use to search for more info, or a brief intro on the basics behind this technique, or if any jQuery etc plugins exist I can play and learn with?

I did a search of their code but nothing jumped out as how to do it, my Javascript and jQuery are still novice level.

解决方案

Javascript Has some native methods like scroll(), scrollTo(), scrollBy() which (with some tricks) you can use to smoothly scroll the page. Together with offsetTop(), offsetLeft() you can achieve effects like on these sites.

There are also a lot of jQuery Plugins out there (e.g. like this google hit) to save you a lot of work with this.

Just search for these Methodnames, this should give you enough hits I guess.

这篇关于垂直滚动捕捉/对齐到div / element / anchor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！