Search code examples
javascripthtmluser-interfacescrollcustom-scrolling

How Do I Scroll All Elements To Target Element

Alright, I have no idea what I'm doing. I thought that there would be a library for this, but apparently there isn't.

Problem Explanation

I have a complicated React Application.

There exists

  • Main Page Element
  • A content container
  • A display container
  • The element I want to scroll to

I am trying to find a solution that will scroll to an element on a page and force all parent scrollbars to scroll to the appropriate location in order to view the element on screen.

Example

<html>
    <head />
    <body>
        <div style="background:red; display: block; height: 1000px; overflow-y: auto">
            Root Parent
            <div>
                <div style="background:green; display: block; height: 1000px;overflow-y: auto">
                    Another Parent
                    <div>
                        <div style="background:blue; display: block; height: 1000px; overflow-y: auto"></div>
                        <div style="background:purple; display: block; height: 1000px; overflow-y: auto">
                            <div id="targetElement">Scroll here</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

JS Fiddle Here
https://jsfiddle.net/10f83ush/

Solutions I've tried

I found zen scroll

But in their How to Use Section - 1.4 they explicitly state it isn't supported https://zengabor.github.io/zenscroll/#howtouse

I found this this thread here Scroll all nested scrollbars to bring an HTML element into view

And I thought that would work but it doesn't.

If I do element.scrollIntoView that doesn't work either because it's got two sets of scrollable parent/grandparent that both need to scroll to.

Request

How the heck do I get all the parents of the target I want to scroll towards to all scroll towards the correct location to show the element on the page?

I feel like I'm going crazy. It's 2020 and I can't simply scroll to an element that's nested inside other scrollable elements?!

EDIT

To clarify, I'm not trying to do a million scroll bars at a time (Yes this is bad UI/UX), but the solution I'm searching for should support as many as possible. There are multiple solutions I've found where the answer has been solved, but only for one or two scroll bars and then ignored more than two. I would love for guidance or help on how to handle any amount of parent scroll bars when trying to scroll a nested element into view.

Solution

  • Without creating a more complicated solution I opted to use a library called scroll-into-view.

    This library is AMAZING - and it does EXACTLY what I wanted which is scrolling elements into view.

    Additionally it supports arbitrarily offsetting the scroll location, the ability to filter scrollable areas so that it doesn't change focus from the entire page, and a ton of other amazing features.

    This was so good I decided to contribute to the patreon for it!

    If you're looking for a solution I would suggest trying this library out!