水平视差滚动到居中的div

时间:2014-09-03 10:36:11

标签: navigation center parallax

我正在构建一个具有水平视差效果的网站,并且不用这个脚本:http://www.pixxelfactory.net/jInvertScroll/

但是我想在导航中滚动到以屏幕为中心的特定项目。例如:单击链接将页面水平滚动到div,然后在浏览器窗口中水平居中。

也许它可以与这样的东西结合起来: http://stereobit.github.io/dragend/

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

我一直在努力达到同样的效果;但我正在努力与锚链接并将它们与视差效果联系起来。我使用通过jquery添加的表创建了水平效果,再加上jquery.mousewheel将滚轮绑定到水平条(而不是jInvertScroll,它仍然显示垂直滚动条)。尽管如此仍然不满意,因为它的工作有点糟糕。

关于居中的问题:我不知道你如何定义你的代码,但是:如果每个页面都有100%的屏幕大小,那么你所拥有的每个内容页面都需要一个全宽度滚动,你可以使用: - 在ajvascript中计算屏幕宽度,然后使用scrollLeft向左或向右移动该宽度 - 使用jquery .next(你的下一个元素)和.prev(orevious元素)来滚动页面

我将尝试在我的尝试中使用第二个;我不知道如何将视差滚动链接到这种方式。也许是计算屏幕上div的确切位置并使用它来计算视差效果的东西,但它会破坏我认为的其他分辨率