javascript - 在垂直 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);

就使用水平滚动条进行垂直滚动而言，我会创建一个位于主要内容下方的假滚动条，并使主要内容在两个方向上都溢出:隐藏。然后使用 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/