Skip to main content

Forums

This topic contains 5 replies, has 3 voices, and was last updated by  cyberbelette 4 years, 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #195030

    bearhead
    Participant

    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?

    #195044

    Shikkediel
    Participant

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

    Edited pen

    #195085

    bearhead
    Participant

    This reply has been reported for inappropriate content.

    Thank you! I don’t quite understand what you did there, but it works perfectly. :)

    #195100

    Shikkediel
    Participant

    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.

    #195101

    bearhead
    Participant

    This reply has been reported for inappropriate content.

    ok, cool thanks for the explanation!

    #202226

    cyberbelette
    Participant

    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 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star