The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript problems with scrolling div

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #195030

    I’m trying to create a div that has several sections in it. There are two buttons that allow the user to scroll up or down a section with each click.

    I’m trying to adapt a script I found on this codepen:

    Here is my codepen:

    As you can see, the scrolling on mine is all wonky and I can’t figure out why. Any ideas on how to fix it?


    Gotta be put together a bit differently with a nested element :

    Edited pen


    No problem. Some minor changes – using position will return the offset to the parent (needed with a nested element), offset retrieves the current position of an element relative to the document (quote from the jQuery spec). Instead of scrolling, the top position is simply animated – and an element that should be animated needs some kind of positioning so I added relative to the wrapper. Hiding the overflow was moved to it’s parent .news_box.


    Hello, Like Barehead I’ve been trying unsuccessfully to adapt the same script in a “window” (div+overflow:hidden).
    I tried Shikkediel’s script, and it works! thanks!!
    But one problem remains: if the last section is shorter than the window height, it scrolls up leaving a white space after…
    On your edited pen you can see this problem easily changing the css .news_box height to 400px.
    How could it be possible to stop the scroll before the end, in order to see the last section with no space under? (what means the top of the last section wouldn’t reach the top of the .news_box window)

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.