问题标签 [scrolltrigger]

苏，

我正在使用带有 ScrollTrigger 的gsap在我的网站上切换暗/亮模式。

我编写了一个函数来检测触发器何时可见：

例如.js__trigger-dark当用户滚动超过第一部分 300px 时切换暗模式，并在用户再次向上滚动到具有类.js__trigger-dark的部分时删除该属性。这工作正常，直到用户到达屏幕底部并删除该属性。

有人可以解释为什么滚动到屏幕底部时它会被删除吗？由于某种原因onEnterBack被调用，我不知道为什么。

问候， b

我想使用 ScrollTrigger 制作一个简单的视差效果。问题是包含“图像”（当前为红色框）的绝对 div 具有比页面本身更大的高度。因此，由于图像已随 ScrollTrigger 移动，因此在页脚之后有很大的间隙。有没有办法防止这个巨大的差距？

这是一个JSFiddle。要查看实际问题，预览窗口的宽度需要至少为 1050 像素。

HTML

SCSS

JS

因此，我使用了多个插件，并且遇到了一个普遍存在的问题，直到将所有内容都剥离回布尔玛。在 Firefox 中使用响应式设计模式时，一切看起来都如我所愿。当启用“触摸模拟”或托管网站并直接在我的手机上查看时，它会将其显示为与我所做的编辑略有不同的损坏版本。

当我使用 GSAP/scrollTrigger 并且它更加崩溃时，这进一步成为一个问题。启用 sccrollTrigger 补间的媒体查询后，我突然失去了我的汉堡菜单，并且多个部分的动画在正确的高度没有响应。有没有其他人在这两个平台上遇到过这个问题？愿意发布任何必要的代码笔示例。

我正在 Ionic 应用程序（v 6.18.1）中实现 GSAP。

我无法创建将 ion-content 组件标识为滚动条的 ScrollTrigger。

我发现了一个带有一些故障的解决方法，因为设置为“中心”的开始和结束参数通过滚动移动并在不滚动时返回中心，因此使用pin:true（我需要它）存在明显的故障。

这是我的组件的代码：

我想删除 div.content-scroll 并将 ion-content 作为滚动条绑定到 ScrollTrigger.create()或停止故障的东西！

我试过： scroller: document.querySelector('ion-content') ion-content class=".content-scroll"

但是我再也看不到标记了...

滚动时如何停止标记？

一些技巧？

提前感谢大家！

我正在尝试使用 React 中的 Material UI 创建一个调查页面。我希望我的调查在用户滚动问题时打开，并在用户滚动出问题时关闭。类似于此页面的行为。

https://www.surveymonkey.com/r/Typical-Customer-Demographics-Template

经过一番研究，我决定在 MUI 中使用 useScrollTrigger 模块。当我向下滚动到问题时，我能够打开这些问题，但是当我向下滚动时，我仍然无法找到一种方法来关闭它们。

这就是我创建 scrollToColor 函数的方式：

我创建了 2 个触发器，所以当它滚动到问题时，文本颜色变成黑色，当滚动出去时，它又变回灰色。这是我如何将其添加到父组件的示例代码。

但不幸的是，这不起作用。关于如何完成这项工作的任何提示？

此外，除了使用 MUI useScrollTrigger 模块之外，在 React 中是否有任何更简单、更清洁的方法可以存档？

谢谢！

我有一个section展示统计数据的。

• 其中一些统计数据是数字（即 145）；
• 有些是数字、字符和符号（即 65K+ 或 $20.00）
• 有些只是纯文本（即“文本”）

当本节位于 中时view，我希望包含要计数的数字的统计信息（当然，不包含不计数的数字的统计信息）。

我想要达到的效果是：

• 所有.statsBannerCard的都设置为visibility: hidden
• 用户滚动到部分
• JS 检查 first 是否.statsBannerCard包含数字；如果是，计数（visibility: visible现在这张单卡）。
• 然后，一旦第一张卡的计数器完成，使第二张卡可见并检查它是否包含数字，依此类推。

一旦前一个卡片计数器完成，就会显示进行中的卡片。如果一张卡片只包含文字（所以我们无法数数），它只会显示卡片并继续前进。

目前的问题：

在下面的演示中，我使用该data-number属性来确定卡片需要计数的数字。向下滚动时，第一个计数器有效（因为它是纯integer），但是，当涉及字符、符号或字母时，它会停止工作。

演示：

我正在尝试实现一个section在视图中变为水平滚动条的内容，直到滚动条中的项目（在我的情况下为图像）完成，此时它再次成为垂直滚动条。

我已经在以下演示中看到并调整了我的方法：

• 使用 GSAP 进行水平滚动
• ScrollTrigger - 水平滚动

我想要实现的美感是默认显示两个图像，然后滚动查看休息。请参阅下面的样机：

这是我目前的方法：

在我上面的演示中，您可以看到在该部分中滚动时，图像向下移动（不是预期的），然后它们开始向左移动（而水平滚动应该向右移动）。

另外，为了最初显示这两张牌，我尝试将 a 设置width为.horizontalScroller__item，但它只会把它弄得更糟。

不确定为什么我的代码会按原样执行，有什么想法吗？

我正在尝试创建一个进度条，显示用户仍有多少特定元素可以查看。以下是一些细节：

• .postProgressBar默认出现在.postHeroImage
• 当用户滚动时，我希望根据剩余的元素滚动到.postProgressBar多少来慢慢填充。.spacer
• 当到达.postProgressBar我的底部时header，我希望它成为fixed底部header（并.postHeroImage在再次出现时取消修复）。

查看我目前的方法：

目前的问题：

1. .postProgressBar不会变成（在检查模式下fixed看不到fixed内联样式）
2. 根据剩余滚动.postProgressBar量，显示的进度不准确。.spacer

我正在向 GSAP 注册 ScrollTrigger 插件，如下所示。

当我这样做时，这个插件注册在哪里？我在哪里可以在window对象下找到它？有一个键，_gsap但我在那里找不到插件。

我想指出我将它与Next.js一起使用。

我想解决一个关于调整大小后文档大小的问题。此外，页面大小在第一次调整大小时不正确，但在 2-3 次调整大小后正确设置。我试图在调用机车更新方法的滚动触发器函数上发出警报，但警报没有出现，所以我得出结论，刷新函数和调用更新的函数不起作用

调整大小后的问题：

目标：

机车的JS代码：