1

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

问题说明

我有一个复杂的 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 小提琴在这里
https://jsfiddle.net/10f83ush/

我尝试过的解决方案

我发现zen scroll

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

我在这里找到了这个线程 滚动所有嵌套的滚动条以将 HTML 元素显示在视图中

我认为这会起作用，但事实并非如此。

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

要求

我怎么才能让我想要滚动的目标的所有父母都滚动到正确的位置以在页面上显示元素？

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

编辑

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

4

1 回答 1

0

在没有创建更复杂的解决方案的情况下，我选择使用一个名为scroll-into-view.

这个库太棒了——它完全符合我的要求，就是将元素滚动到视图中。

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

这太好了，我决定为它贡献力量！

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

于 2020-11-30T22:16:58.300 回答