将垂直滚动添加到水平滚动条 [英] Appending a Vertical Scroll to a Horizontal Scroll Bar
问题描述
我一直试图做这样的事情，并尝试了各种方法，从假滚动条和DOM欺骗代码。似乎没有什么像我需要的那样干净/正常。
I've been trying to do something like this for quite a bit, and have tried a variety of methods from fake scroll bars and DOM-tricking code. Nothing seems to quite be as clean / functioning as I need it to be.
我要做的是有一个水平滚动div（带滚动条），嵌套在其中的垂直滚动div。理想情况下，单个水平滚动条会滚动，在某个点之后 - 垂直滚动它旁边的go-updiv。
What I'm trying to do is have a horizontally scrolling div (with scrollbar), with a vertically scrolling div nested within it. Ideally the single horizontal scrollbar would scroll, and after a certain point--vertically scroll the "go-up" div next to it.
这是一个示例图表需要可视化：
我想我有一个解决方案可以工作：
Here's an example diagram for those who need to visualize: I think I have a solution that could work:
基本上我认为水平场景可能有溢出等于上升div的高度。并且在场景的水平宽度通过之后...你可以在onScroll上使用（ScrollLeft）向上移动go-up容器并使用（ScrollTop）向上移动。
Basically I'm thinking that the horizontal "scene" could have overflow that equals the height of the "go-up" div. And after the horizontal width of the "scene" passes...you can, onScroll, shift the "go-up" container right using (ScrollLeft) and up using (ScrollTop).
基本上给你一种用水平滚动条控制它的垂直滚动的错觉。
Basically giving you the illusion of controlling it's vertical scroll with a horizontal scrollbar.
在这里查看代码： http://jsfiddle.net/jPzqj/1/
我知道如何在场景结束时传递一个函数...目前我正在使用：
I know how to pass a function at the end of the "scene"...currently I'm using:
$('#main').scroll(function(e)
{
if($(this).scrollLeft()>1430)
{
}
});
我唯一的问题是我不太确定如何接近允许我转移的数学上升容器。如何将scenedivs滚动值传递到ScrollLeft和ScrollTop值go-up...
My only issue is I'm not quite sure how to approach the math that would allow me to shift the go-up container. How do I pass in the "scene" divs scroll value into the ScrollLeft and ScrollTop values of "go-up"...
任何人都可以给我任何建议在所有？
Could anyone give me any advice on this at all?
谢谢。
推荐答案
你是完全偏离正确的路径，不涉及垂直滚动条。
You are totally off the right path, no vertical scrollbars are involved.
这是一个很好的网站（不是你明显在30分钟内制作的网站）， javascript是混淆的，但是如果你感兴趣的话，你可以通过Firebug观察源代码来了解发生了什么。
That is a good site (not the one that you make in 30 minute obviously), and the javascript is obfuscated, but if you are interested, you could watch the source with Firebug to understand what's going on.
它通过混合来工作javascript 库，一些很酷的 CSS3 Transform3D 效果，以及一个经过精心研究的 HTML 给你屏幕向上滚动的效果（实际上，只有图像在移动 - 而不是滚动 - 而屏幕始终处于相同的Y位置）。
It works by mixing a javascript library, some cool CSS3 Transform3D effects, and a nicely studied HTML to give you the effect of the screen scrolling up (actually, only the images are moving - and not scrolling - while the screen is always in the same Y position).
同样的效果用于通过在背景中移动房屋来创建深度感知 d比前面的慢。
The same effect is used to create the percetion of depth, by moving the houses in background slower than the ones in front.
此效果称为 PARALLAX SCROLLING 。
This effect is called PARALLAX SCROLLING .
一个好的 javascript 库你可以开始查看视差效果是 Stellar.js
A good javascript library you could start looking at for Parallax effects is Stellar.js
你可以看看 一些很棒的网站 使用 Stellar.js ，尤其是 Nike 和 Saucony 。
You can take a look at some great sites made with Stellar.js, especially Nike and Saucony.
希望这个答案能为您节省一些时间，
Hope this answer saved you some time,
祝你学习顺利;）
编辑
这是你想要的： Jquery Parallax滚动效果 - 多方位
从获得赏金的答案中打开小提琴并保持向右箭头键。
open the fiddle from the bounty-awarded answer and keep the right arrow key down.
这篇关于将垂直滚动添加到水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
