Question

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

查看此网站以获取示例：http://paranorman.com/scene/normans-friends ...您将看到水平滚动的方式，突然变成垂直滚动...

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

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

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

有没有办法在其内容的底部（使用JS或CSS）进行“go-up”div启动？这似乎是最简单的方法，但如果还有其他方法，我愿意接受建议。

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/

我的演示在这里使用垂直卷轴（3000px）的固定位置和假卷轴的任意宽度，但是稍微多一些工作，你可以自动找到位置，并根据一些合理的计算设置宽度

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

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

1 个答案: