Grow your CSS skills. Land your dream job.

please help understanding website scrolling behavior

  • # June 2, 2013 at 11:23 am

    hi all, i’m trying to replicate the scrolling behavior on [this site](http://www.designweekportland.com/2012). in particular, here are the features that i’m tring to reproduce:

    1) When you scroll **anywhere on the page** it scrolls through the detailed list of events to the right, inside the div .content. once the bottom is reached, then it scrolls the entire page moving to the next major section of the page, each section corresponding to a particular day. the process then repeats and also works in reverse. it doesn’t matter where you scroll, the scroll behavior is always the same.

    2) When you scroll there is only one scollbar slider visible on the far-right. And what is most interesting is that even when you are scrolling through the event list, the scroll bar is still sliding. In other words, somehow the content within the event lists is counted within the length of the entire page within the scroll bar.

    Here is my attempt so far to replicate this: http://codepen.io/ezmiller/pen/xqtjs . The effect works more or less if you use the mouse wheel while hovering over the blue sections to the left. I am not at all sure that I’m going down the right path there though, and I’m also have no clue how to achieve #2 above. If anyone has any insights/tips about how to achieve all this, I’d be very grateful.

    # June 2, 2013 at 6:50 pm

    For the scrolling they use JS to change the class on the `li` elements. Between `above-section`, `active-section`, `mid-section` and `below-section`. You can search the CSS for those classes :)

    # June 16, 2013 at 7:17 am

    @CrocoDillon thanks! I eventually figured this out. [Here](http://codepen.io/ezmiller/pen/tpgbJ) is a codepen where I mostly got it to work.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".