向上滚动而不是向下放在垂直div容器中

Question

我目前拥有用于水平滚动视差网站的HTML和CSS。不过，我想这样做，所以当你到达特定的部分时，你会得到垂直视差滚动而不是水平滚动。

检查出这个网站的例子：http://paranorman.com/scene/normans-friends ......你会看到怎样的水平滚动，突然变成一个垂直滚动...

看看这个的jsfiddle：http://jsfiddle.net/L2MZe/

我目前有一个水平滚动视差，其中嵌入了一个垂直滚动div ...我真的不知道如何让div向上滚动，而不是向下滚动。

这是我用我的“走一起”代码的div：

#go-up { 
background-color:blue; 
width:650px; 
left:3000px; 
overflow-y: scroll; 
height:100%; 
overflow-x:hidden; 
} 

有没有一种方法，使“走一起” DIV其内容的底部开始（与JS或CSS）？这似乎是最简单的方式，但如果有其他方式，我可以接受建议。

Answer 1

要滚动位置设置为底部，你可以使用jQuery/JavaScript的一点点：

// maximum vertical scroll 
var maxScrollV = $('#go-up')[0].scrollHeight - $('#go-up').innerHeight(); 

// Set vertical scroller to bottom 
$('#go-up').scrollTop(maxScrollV); 

至于与水平滚动条做垂直滚动，我会创建一个假的滚动它位于主要内容下方并在两个方向上制作主要内容overflow: hidden。然后使用jQuery和一些数学使用伪造的滚动条的位置来设定主要内容的滚动位置：

$('#main').stellar(); 

// maximum vertical scroll 
var maxScrollV = $('#go-up')[0].scrollHeight - $('#go-up').innerHeight(); 

// Set vertical scroller to bottom 
$('#go-up').scrollTop(maxScrollV); 

// Maximum horizontal scroll of fake scroller 
var maxScrollH = $('#scroller')[0].scrollWidth - $('#scroller').innerWidth(); 

// Whenever you move the fake scroller, update the content's scroll 
$('#scroller').on('scroll', function() { 
    // position of fake scroll bar 
    var sL = $('#scroller').scrollLeft(); 
    if (sL < 3000) { 
     // If not at the vertical scroller, just H-scroll 
     $('#main').scrollLeft(sL); 
    } else { 
     // How far have we scrolled passed the vertical scroll point? 
     var percScrollV = (sL-3000)/(maxScrollH-3000); 

     // Make sure we only scroll to the vertical scroll point 
     $('#main').scrollLeft(3000); 

     // Do the vertical scroll 
     $('#go-up').scrollTop(maxScrollV - (maxScrollV * percScrollV)); 
    } 
}); 

演示：http://jsfiddle.net/JD7Jc/1/

这里我演示使用了垂直滚动条的固定位置（3000像素）和假滚动的任意宽度，但有一点点工作，你可以自动找到位置，以及根据一些合理的计算设置宽度。

编辑，这就是一个很好的例子：http://jsfiddle.net/JD7Jc/2/