立式带止动滚动/对齐DIV /元/锚(Vertical scrolling with snap/al

2019-07-29 22:18发布

我发现了一些可爱的网站- http://www.mini.jp/event_campaign/big-point/ , http://www.twenty8twelve.com/和http://www.scozzese.com -所有垂直滚动,以及所有使用对齐“网页”,以便当您滚动到一个新的“页面”在浏览器顶部的技术 - 即使你的滚动一半为一体。

谁能给我如正确的术语/话,我可以用它来寻找更多的信息,或对基础知识的简要介绍这项技术背后的指针,或者任何的jQuery插件等存在,我可以玩,和学习?

我做了搜索他们的代码,但没有跳出如何做到这一点,我的JavaScript和jQuery还是新手的水平。

Answer 1:

JavaScript有像一些本地方法scroll(), scrollTo(), scrollBy()这(与一些技巧),你可以用它来平滑滚动页面。 连同offsetTop(), offsetLeft()就可以实现像在这些网站上的效果。

也有很多jQuery插件那里(例如,像这样的谷歌打 ),为您节省了大量的工作与此有关。

只要搜索这些方法名,这应该给你足够的点击率,我猜。



Answer 2:

基本滚动...

// Scroll
h = $(window).height();
t = $("mydiv").offset().top + $("mydiv").height();

if(t > h) {
    $(window).scrollTop(t - h);
}


Answer 3:

他们的滚动脚本是不是很聪明。 如果我滚动网页上下反复点击向下箭头,每次我点击一次,它滚动备份。 所以难免它不工作。



文章来源: Vertical scrolling with snap/align to div/element/anchor