Scrolling up instead of down in vertical div container

Question

I currently have HTML and CSS for a horizontally scrolling parallax site. However, I would like it so when you get to a specific section you're given a vertical parallax scroll instead of a horizontal one.

Check out this site for an example: http://paranorman.com/scene/normans-friends ...you'll see how the horizontal scroll, all of a sudden becomes a vertical scroll...

Check out this JSFiddle: http://jsfiddle.net/L2MZe/

I currently have a horizontally scrolling parallax, with a vertical scrolling div nested inside of it...I'm not really sure how to make the div scroll up, instead of down though.

This is the code I'm using for my 'go-up' div:

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

Is there a way to make the 'go-up' div start at the bottom of its content (with JS or CSS)? This seems like the easiest way, but if there are other ways I'm open to suggestions.

Jeff B · Accepted Answer · 2013-04-03T20:52:47.357

To set the scroll position to the bottom, you can use a little bit of jQuery/javascript:

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

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

As far as doing the vertical scroll with a horizontal scroll bar, I would create a fake scroll bar that sits below the main content and make the main content overflow: hidden in both directions. Then use jQuery and some math to use the position of the fake scroll bar to set the scroll position of the main content:

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

Demo: http://jsfiddle.net/JD7Jc/1/

My demo here uses a fixed position for the vertical scroller (3000px) and an arbitrary width for the fake scroller but with a little more work, you could find the position automatically, as well as set the width according to some sensible calculation.

EDIT, Here is an example of that: http://jsfiddle.net/JD7Jc/2/

This is ridiculously impressive. Really wouldn't have thought of this on my own. Can't thank you enough! — richie, Apr 03 '13 at 21:03
Unfortunately, after using this method for a bit--I've realized you can't attach a scrollwheel method to the "fake" scroller....any ideas? — richie, Apr 15 '13 at 09:59
Added demo above. It uses some basic javascript event handling because the mousewheel event is not cross-browser. There are plugins for this, but the demo should show you the basics: http://jsfiddle.net/SKUQB/ — Jeff B, Apr 15 '13 at 22:15
Thanks again for your help! Out of curiosity, could you give me your opinion on this idea here: http://stackoverflow.com/questions/16030147/appending-a-vertical-scroll-to-a-horizontal-scroll-bar?noredirect=1#comment22867936_16030147 Basically I'm trying to achieve the same, but in a slightly different way. Does that approach work or am I completely off the mark? Also I really appreciate the help. My only problem with the implementation above has to do with some of the math. Basically resizing or adding more content to what I have is shifting things in a way I don't want. — richie, Apr 16 '13 at 11:35

Scrolling up instead of down in vertical div container

1 Answers1