将垂直滚动添加到水平滚动条

Question

我一直在尝试做这样的事情很多，并尝试了各种方法从假滚动条和DOM欺骗代码。没有任何事情看起来像我所需要的那样清洁/正常。

我想要做的是有一个水平滚动div（带滚动条），其中嵌套一个垂直滚动div。理想情况下，单个水平滚动条将滚动，并在某个点之后 - 垂直滚动旁边的“上升”div。

这里是为那些谁需要形象化的例子图： 我想我有一个解决方案，它可以工作：

基本上我认为水平“场景”可能有溢出，等于高度的“上升”部分。在“场景”的水平宽度通过之后......您可以在onScroll上使用（ScrollLeft）和使用（ScrollTop）将“go-up”容器右移。

基本上给你一个控制垂直滚动和水平滚动条的错觉。

退房这里的代码：http://jsfiddle.net/jPzqj/1/

我知道如何在“场景”结束传递一个函数...我目前使用：

$('#main').scroll(function(e) 
    { 
     if($(this).scrollLeft()>1430) 
     { 

     } 
}); 

我唯一的问题是我不太清楚如何处理数学问题，这可以让我转换升降容器。我如何通过在“场景”的div滚动值进入“去了”的ScrollLeft和scrollTop的值...

任何人都可以给我任何意见在这呢？

谢谢。

Answer 1

您是完全关闭了正确的道路，没有垂直滚动条均有涉及。

这是一个很好的网站（不是你在30分钟内制作的那个网站），而且javascript被混淆了，但是如果你有兴趣，你可以用Firebug观看源代码以了解发生了什么。

它通过混合javascript库，一些很酷的CSS3 Transform3D效果，一个很好的学习HTML给你屏幕的效果向上滚动（实际上，只有图像是运动 - 而不是滚动 - 而屏幕上始终是在相同的Y位置）。

使用相同的效果创建深度的知觉，通过移动背景中的房屋比前面的慢。

该效果被称为PARALLAX SCROLLING。

一个好的javascript库，你可以开始寻找视差效果是Stellar.js

你可以看看some great sites与Stellar.js制成，尤其是Nike和Saucony。

希望这个答案救了你一段时间，

于学习的好运气;）

---

编辑

这是你想要的：Jquery Parallax Scrolling effect - Multi directional

打开摆脱赏金奖励的答案，并保持右箭头键。