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

Question

我目前拥有用于水平滚动视差站点的HTML和CSS。 但是，我希望这样，当您到达特定部分时，将获得垂直视差滚动而不是水平视差滚动。

查看此站点的示例： http : //paranorman.com/scene/normans-friends ...您将看到水平滚动如何突然变成垂直滚动...

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

我目前有一个水平滚动的视差，其中嵌套了一个垂直滚动的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双向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/

我的演示在此处为垂直滚动条使用固定位置（3000px），为伪造的滚动条使用任意宽度，但是通过做更多的工作，您可以自动找到位置，并根据一些合理的计算来设置宽度。

编辑，这是一个示例： http : //jsfiddle.net/JD7Jc/2/