如何将所有元素滚动到目标元素

Question

好吧，我不知道我在做什么。我以为会有一个图书馆，但显然没有。

问题说明

我有一个复杂的 React 应用程序。

存在

主页元素
一个内容容器
一个展示容器
我要滚动到的元素

我正在尝试找到一种解决方案，该解决方案将滚动到页面上的某个元素并强制所有父滚动条滚动到适当的位置，以便在屏幕上查看该元素。

例子

<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这里
https://jsfiddle.net/10f83ush/

我试过的解决方案

我找到了zen scroll

但是在他们的 How to Use Section - 1.4 中他们明确声明它不受支持 https://zengabor.github.io/zenscroll/#howtouse

我在这里找到了这个帖子

我认为这行得通，但行不通。

如果我这样做 element.scrollIntoView 也不起作用，因为它有两组可滚动 parent/grandparent 都需要滚动到。

请求

如何让我想要滚动到的目标的所有父级都滚动到正确的位置以在页面上显示元素？

我觉得我快疯了。现在是 2020 年了，我不能简单地滚动到嵌套在其他可滚动元素中的元素吗？！

编辑

澄清一下，我并不想一次做一百万个滚动条（是的，这很糟糕 UI/UX），但我正在寻找的解决方案应该支持尽可能多的滚动条。我找到了多种解决方案，其中答案已解决，但仅针对一两个滚动条，然后忽略了两个以上。在尝试将嵌套元素滚动到视图中时，我很想获得有关如何处理任意数量的父滚动条的指导或帮助。

Answer 1

在不创建更复杂的解决方案的情况下，我选择使用名为 scroll-into-view 的库。

这个库非常棒 - 它完全符合我的要求，即将元素滚动到视图中。

此外，它还支持任意偏移滚动位置、过滤可滚动区域以使其不会改变整个页面的焦点的能力，以及大量其他令人惊叹的功能。

这太棒了，我决定为它贡献一份力量！

如果您正在寻找解决方案，我建议您试试这个库！

如何将所有元素滚动到目标元素

How Do I Scroll All Elements To Target Element

javascript

html

user-interface

scroll

custom-scrolling

问题说明

例子

我试过的解决方案

请求