Défilement vers le haut au lieu de vers le bas dans le conteneur vertical div

Question

J'ai actuellement HTML et CSS pour un site de parallaxe à défilement horizontal. Cependant, je voudrais que quand vous arrivez à une section spécifique, on vous donne un parallaxe vertical au lieu d'un horizontal.

Consultez ce site pour un exemple: http://paranorman.com/scene/normans-friends ... vous verrez comment le défilement horizontal, tout d'un coup devient un défilement vertical ...

Vérifiez cette jsFiddle: http://jsfiddle.net/L2MZe/

J'ai actuellement une parallaxe défilant horizontalement, avec un div de défilement vertical imbriqué à l'intérieur de celui-ci ... Je ne suis pas vraiment sûr de savoir comment faire défiler le div, au lieu de descendre.

C'est le code que je utilise pour mon « go-up » div:

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

est-il un moyen de faire le « go-up » div commencer au bas de son contenu (avec JS ou CSS)? Cela semble être le moyen le plus simple, mais s'il y a d'autres façons d'être ouvert aux suggestions.

Answer 1

Pour définir la position de défilement vers le bas, vous pouvez utiliser un peu de jQuery/javascript:

// maximum vertical scroll 
var maxScrollV = $('#go-up')[0].scrollHeight - $('#go-up').innerHeight(); 

// Set vertical scroller to bottom 
$('#go-up').scrollTop(maxScrollV); 

En ce qui fait le défilement vertical avec une barre de défilement horizontale, je créerais un rouleau faux barre qui se trouve ci-dessous le contenu principal et faire le contenu principal overflow: hidden dans les deux sens. Ensuite, utilisez jQuery et quelques calculs pour utiliser la position de la barre de défilement faux pour régler la position de défilement du contenu principal:

$('#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)); 
    } 
}); 

Démo: http://jsfiddle.net/JD7Jc/1/

Ma démo utilise ici une position fixe pour la barre de défilement vertical (3000px) et une largeur arbitraire pour le défilement faux mais avec un peu plus de travail, vous pourriez trouver la position automatiquement, ainsi que définir la largeur selon un calcul sensible.

EDIT, Voici un exemple de ce: http://jsfiddle.net/JD7Jc/2/