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

Question

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

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

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

基本上我认为水平“场景”可能有溢出等于“up-up”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库是Stellar.js

您可以查看使用Stellar.js制作的some great sites，尤其是Nike和Saucony。

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

祝你学习顺利;）

---

编辑

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

从获得赏金的答案中打开小提琴，然后按住右箭头键。