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

我一直试图做这样的事情，并尝试了各种方法，从假滚动条和DOM欺骗代码。 似乎没有什么比我需要它更干净/更有效。

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

以下是需要可视化的人的示例图： 我想我有一个可行的解决方案：

基本上我认为水平“场景”可能有溢出等于“上升”div的高度。 在“场景”的水平宽度通过之后……你可以在onScroll上使用（ScrollLeft）向上移动“go-up”容器并使用（ScrollTop）向上移动。

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

看看这里的代码： http ： //jsfiddle.net/jPzqj/1/

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

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

我唯一的问题是我不太确定如何接近数学，这将允许我改变上升容器。 如何将“scene”divs滚动值传入ScrollLeft和ScrollTop值“go-up”…

有人可以给我任何建议吗？

谢谢。

Answer 1

你完全偏离了正确的道路，没有涉及垂直滚动条。

这是一个很好的网站（显然不是你在30分钟内制作的网站），并且javascript被混淆了，但是如果你有兴趣，你可以通过Firebug观察源代码来了解正在发生的事情。

它的工作原理是混合一个javascript库，一些很酷的CSS3 Transform3D效果，以及一个经过精心研究的HTML ，让你了解屏幕向上滚动的效果（实际上，只有图像在移动 – 而不是滚动 – 而屏幕总是在同一个Y位置）。

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

这种效果称为PARALLAX SCROLLING 。

一个很好的javascript库你可以开始寻找Parallax效果是Stellar.js

你可以看一下Stellar.js制作的一些很棒的网站 ，尤其是Nike和Saucony 。

希望这个答案能为你节省一些时间，

祝你学习好运;）

---

编辑

这就是你想要的： Jquery Parallax滚动效果 – 多向

从获得赏金的答案中打开小提琴并保持向右箭头键。