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 に答える