2

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

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

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

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

这是我用于我的 'go-up' div 的代码：

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

有没有办法让'go-up' div 从其内容的底部开始（使用 JS 或 CSS）？这似乎是最简单的方法，但如果有其他方法，我愿意接受建议。

4

1 回答 1

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/

我在这里的演示使用垂直滚动条的固定位置 (3000px) 和假滚动条的任意宽度，但需要做更多的工作，您可以自动找到位置，并根据一些合理的计算设置宽度。

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

于 2013-04-03T20:14:41.677 回答