我用 groupPagingCentered 的正交部分做了 UICollectionViewCompositionalLayout 如下：

其他部分垂直滚动。垂直滚动时，正交偏移重置为零。如果我评论 visibleItemsInvalidationHandler，它不会被重置。

为什么会这样？有人有这个问题吗？

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

问题说明

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

那里存在

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

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

例子

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），但我正在寻找的解决方案应该支持尽可能多的。我找到了多种解决方案，其中答案已经解决，但仅适用于一两个滚动条，然后忽略了两个以上。在尝试将嵌套元素滚动到视图中时，我希望获得有关如何处理任意数量的父滚动条的指导或帮助。

我读了无数的帖子，无数次地重写了代码，我发现自己碰壁了。由于容器应用了 CSS scale3d 转换，我试图克服在滚动页面时不使用 CSS 来固定元素位置的限制。虽然我的最新解决方案有效，但它有时仍然容易出现“卡住”和“口吃”，主要是在初始滚动时（似乎一些滚动“势头”提高了明显的性能）。这个目前的项目是对一个用 Ember 编写的旧应用程序的重写，并且该应用程序中的相同功能可以完美运行。我已经逐步完成了去细化的 Ember 代码，直到我的眼睛流血，试图发现使用什么巫术来完成这个（没有成功）。

这是我最新的迭代，迄今为止性能最好：

阻止一些评论：我已经尝试了这段代码，而不必担心应用以前的转换：

我尝试过直接 DOM 构造——使用document.querySelectorAll然后遍历元素，调用element.style.transform = `translate3d(0px, ${scaled}px, 0px)`

这些解决方案都有效——jQuery（令我惊讶的是）似乎是最好的——但并非完美无缺。如前所述，如果不是因为我亲眼目睹了一个仅 JS 的解决方案在没有卡住/口吃的情况下工作，我会说这是不可能的。

这是我的白鲸 - 任何指导表示赞赏。

更新 - 创建了一个快速 n-dirty JSFiddle：https ://jsfiddle.net/syzmic/sbwac5zq/3/

我从当前项目中滚动最成问题的页面中抓取了 HTML。我包括了 JS 的当前状态。它在大多数情况下都有效..但是快速鼠标滚轮会导致口吃或弹跳。

前两天在flutter中学习了sliver widget的使用，正在用它来提升自己的技能。我正在构建一种想象中的项目，在那里我遇到了一个问题。

让我们想想，在 x 小部件下我的身体容器中有 15 个容器，它们允许它们垂直滚动。现在，我的目标是，当我滚动时，我希望当 5 号容器到达顶部时，5 号容器会卡在那里像 appbar 或像 sliver appbar 一样，其他人会在它下面滚动。

在这里，我在 CustomScrollView 小部件下使用 sliver 和 SliverFixedExtentList 来了解我的目标，如果有任何其他没有 slivers 的选项，请随时与我分享。提前致谢 ：）

所以我试图让它像滚动条浏览器一样工作，并让ScrollView与自定义指示器同步移动。现在我已经从onPanResponderRelease中调用了scrollTo() ，就像这样......

但是，要获得我想要的效果，我相信scrollTo()需要从onPanResponderMove内部调用，当前设置为此...

您在此处看到的Animated.event是驱动指示器在触摸时移动的原因。但是我怎么能从 onPanResponderMove 中调用scrollTo ( )呢？或者这甚至是一个好主意？如果我能够做到这一点，则ScrollView将与指示器同步移动。至少我是这么认为的……

归根结底，我想要的是一个 ScrollView，它有一个像浏览器的滚动条一样工作的滚动条。这意味着滚动条指示器是可触摸和可拖动的。理想情况下，我希望在FlatList上执行此操作，但我认为首先在ScrollView上执行此操作会更简单，然后我可以将相同的原理应用于FlatList组件。

这是所有的代码...

免责声明：我不是 JavaScript 开发人员，我是网页设计师。HTML 和 CSS，我整天都在处理，JS，没那么多。这就是我寻求帮助的原因。

以下脚本允许平滑滚动到页面顶部：

如果用户决定在脚本运行时向下滚动并将用户带回页面顶部，是否有办法“停止”脚本的执行？

这是一个供参考的演示：https ://codepen.io/ricardozea/pen/ewBzyO

谢谢你。

我正在开发一个使用 win2d CanvasVirtualControl 绘制图像网格的应用程序。我想滚动绘制内容，以便将先前绘制的图块滚动到某个位置，并绘制新的图像图块。Currenty 通过使用 PointerWheelChanged 实现了它，但是获取生涩的滚动不是一个平滑的滚动。

我想创建一个画廊应用程序。我试图复制谷歌的一些设计，但我的图像加载速度要慢得多，滚动也不是很流畅。这可能是因为我的布局文件，但我不知道如何使它更好。

这是我的适配器：

也许你可以帮助我或找到导致它变慢的东西。我的两个自定义视图非常快，我很确定它们不是问题。

我似乎无法设置scroll-snap-type为none移动断点。理想情况下，我想在移动设备上删除 css scroll snap，因为当在移动设备上滚动浏览我的应用程序时，它让许多用户感到困惑，并且有时可能会出现问题。CSS 滚动捕捉效果很好，但我似乎无法将其设置none为移动设备。

有什么想法或建议吗？

这是我的 CSS Scroll Snap 代码：

任何帮助都非常感谢，在此先感谢您！

我基本上有一个聊天，一开始只加载了一部分。现在我需要在顶部和底部添加更多数据（小部件）。

现在在我的示例中，我已经实现了，当用户向上滚动并且剩余 50 个或更少的小部件时，它会调用后端来加载更多数据（因此，当用户进一步向上滚动时，加载已经在进行或完成）。工作正常，一旦加载数据，用户就可以进一步向上滚动。就像在 WhatsApp 和更多带有提要的应用程序中一样。

然而，也需要加载新消息。这些是在底部添加的。但是，这会移动列表视图中的每个项目，这是一个巨大的问题，因为当用户查看历史记录时，我们不想“自动滚动”新小部件的数量......

如何在不“移动”内容的情况下双向添加小部件？

###小后端模拟###

### 我的自定义“列表视图”###