问题标签 [overscroll]

我有以下带有可折叠工具栏布局和回收站视图的布局。不知何故，它不允许 recyclerview 过度滚动。我怎样才能做到这一点？谢谢！

我在移动 safari 中过度滚动 div 时遇到问题。我有一个嵌套结构body { position: fixed }，其中有一个父 div 和一个子 div。容器 div 具有：.container { overflow-y: scroll; -webkit-overflow-scrolling: touch; }和一个max-height由 javaScript 动态设置的属性。

当我在移动 safari 中将容器过度滚动到子 div 的内容之外时（踢出“过度滚动”或“弹性/橡皮筋”滚动效果，我会出现各种抖动，如下所示：

我已经搜索了 SO 和我能找到的所有其他资源，但无济于事。我觉得一条信息可能是相关的：

如果我禁用元素上的滚动，我可以像尝试滚动一样拖动屏幕，有时我可以让子内容的底部消失并在 iPhone 上显示约 40px 的容器 div 的背景。它大致是底部控制栏的大小，但出现在控制栏上方。

我还在一个深埋的评论中读到，曾经有一个 safari 在滚动时触发调整大小事件的错误，但我已经设置事件侦听器来提醒是否触发了调整大小事件以进行测试，并且没有发生这种情况。

我不知道要寻找什么来解决这个问题。关于造成这种情况的想法？

注意：FWIW，这是在 React 中使用 create-react-app 构建的。

我希望根据我在 React 中的 Slider 上的水平滚动行为来更新我的列表项上的 className。关于如何解决这个问题的任何建议？到目前为止我找不到解决方案。

目前，一个图像填满了窗口的整个宽度，并且在滚动时下一个项目变得可见。但我也想让这个开关在 ul 列表项中可见。基本上，滚动后，我希望列表项 1 中的 className 变为“非活动”，第二个列表项 className 变为“活动”，依此类推。

基本上主要组件看起来像这样：

我的 Slider 组件如下所示：

在我的 css（或 scss）中，我使用 .highlights_slideroverflow-x: scroll

任何帮助表示赞赏！提前致谢！！

如何在全屏垂直 ScrollView (SwiftUI) 中禁用过度滚动？

https://www.youtube.com/watch?v=dOyWCDhlxv8 - 过度滚动示例（我知道，在视频旧 Android 设备上）

colora的顶部和底部Overscroll指示器是否可以不同ListView？

我有ListView颜色渐变的背景，并希望它顶部Overscroll指示器与渐变顶部匹配，底部指示器与渐变底部匹配。

我正在尝试构建特斯拉克隆应用程序。我在应用程序的移动使用过程中发现了问题。在 Tesla 网站上，当用户尝试过度滚动时，页面会自动弹回。在网站上实现了内部滚动并在部分之间进行捕捉，因此当您过度滚动时，您会被卡住，您可以切换页面并强制，但内部滚动不起作用，您必须等到页面从过度滚动的位置。我希望我解释了它，所以你能明白我的意思。

供参考：tesla.com

我的网站：https ://axis-9f3a8.firebaseapp.com/

页面的git：https ://github.com/FlipTaras/tesla-clone

我正在寻找一种 CSS 解决方案来实现"overscroll-behavior: contain"目标元素没有溢出时的确切行为。

我有一个带有弹出式侧边栏/菜单的页面，在移动设备上占用 100vw 和 100vh（减去底部导航栏）并且不会溢出（没有足够的内容需要滚动条）。目前，当此侧边栏在移动设备上打开时，如果用户尝试滚动它，后台的主页会滚动，在此应用程序中，由于延迟加载/无限滚动，这可能会导致不需要的数据库调用。

这是一个最小的代码框演示：

在 demo.js 的第 55 行我已经在 J​​SS 中添加了该overscrollBehavior: "contain"属性，但是正如您所见，它不包含滚动链，除非您缩小浏览器的垂直高度以强制侧边栏的内容先溢出。（在 Chrome 上，overscrollBehavior似乎在代码框编辑器中具有预期的行为，但在其自己的窗口中弹出时却没有。）

肯定有一个 CSS 解决方案来获得这种行为，而无需先滚动元素吗？

有趣的是，至少在 Firefox 上，如果您缩小垂直高度以强制在侧栏上滚动，一旦您将浏览器调整为正常大小，该overscroll-behavior属性将继续包含滚动链，直到您刷新页面，这就是我的行为寻找，虽然显然在初始页面加载。

这是一个简单的代码笔，它显示了overscroll-behavior元素溢出和不溢出的区别，如果还不清楚的话。我还在2018 年的 CSS Tricks 论坛上发现了另一个帖子，有人询问这种行为，但没有解决方案。

这个简单的示例非常适合为桌面浏览器制作垂直滚动/投掷效果。

当轻弹滚动回到顶部时，惯性插件使内容过度滚动并反弹回起点。这很好。

但是，仅拖动时不会发生过度滚动，即。就像在 iPad 上一样。是否可以在拖动时使 Draggable overshoot/overscroll 并在拖动结束时反弹？

编辑：这是带有示例的codepen：

https://codepen.io/Agint/pen/LYZMyYR

（我找不到最新的 gsap InertiaPlugin 的 cdn 版本，所以这个版本是旧版本的。无论版本如何，行为和问题都完全相同。在本地，我有最新的 gsap 版本，其中包含来自 greensock 的 InertiaPlugin 的奖励文件.)

我在 Chromium 相关浏览器中的几个页面上发现了这个错误。我打开了一个Chromium 问题，项目成员无法重现该问题 - 我试图弄清楚为什么会发生这种情况（因为问题发生在 google.com、amazon.com 等页面上，在几个Mac-OS 设备，没有其他共同点） - 我们在干净的 Chrome 安装上尝试了它，问题也出现了。对我来说，这似乎是一个错误 - 现在我想知道其他人是否也无法复制。如果您可以重现（重现阅读下面的行）和/或找到有关该问题的新内容/有趣的内容，请考虑支持Ticket/Chromium Issue。

铬版

91.0.4472.101（Offizieller 构建）（x86_64）

测试的 URL

• https://www.google.de/
• https://www.microsoft.com/de-de
• https://www.amazon.de/

其他浏览器测试

• Safari：没有问题
• Firefox：没有问题
• Edge：有同样的问题（也是基于 Chromium 的）
• Chrome Canary：有同样的问题（也基于 Chromium）

如何重现问题？

刷新页面 (Command+Shift+R) 并在页面加载或并行时向上滚动（您必须快速重现）。

预期的结果是什么？

预计页面不应过度滚动并停止在页面顶部/末尾，而是页面可以在页面顶部上方无限滚动，向下滚动会出现相同的问题，滚动应在页面底部停止。

相反会发生什么？

浏览器不断在页面顶部/底部上方滚动。一旦触发无限滚动，即使在刷新页面后也不会消失 - 改变行为的唯一方法是复制 url 并将其粘贴到新选项卡中。

我的作品集顶部为黑色，底部为白色。当您在顶部过度滚动时，主体的白色背景会短暂显示，从而产生如下不需要的对比：

因此，我希望顶部为黑色过度滚动，底部为白色。顶部的一个简单修复是将主体的背景颜色设置为黑色，但随后我得到了底部的相反问题。我尝试在 body 和 html-page 上使用线性渐变或将具有负边距的彩色容器放在顶部或底部，但这不起作用。有没有办法为顶部和底部过度滚动设置不同的颜色？

示例代码沙箱： https ://codesandbox.io/s/overscroll-color-ns9yd

沙盒直播示例代码（不能在沙盒中测试过度滚动）： https ://ns9yd.csb.app/

补充： 今天当我在 android 和 windows 上用鼠标使用 chrome 时，我意识到所描述的过度滚动效果并没有出现在那里。因此，效果可能特定于触摸板滚动。当我问这个问题时，我一直在使用 MacBook。因此，它可能仅在使用触摸板滚动时出现在 MacBook 上

Youtube 过度滚动演示： https ://youtu.be/Ec1D6KNlhIM

身体背景黑色过度滚动（简单修复）： https ://youtu.be/zYITinXs6OY