Astro v4 项目上 rolly.js 实现的错误

小能豆

Astro v4 项目上 rolly.js 实现的错误

我没有太多使用 Astro v4 框架的经验，所以我实际上在学习如何使用它的同时尝试使用它。显然，我尝试了一些错误或错误，但所有这些我都成功修复，尽管事实并非如此。

我正在尝试添加 rolly.js 实现，但是当导入最终“成功”工作时，它出现了一些错误。

在这种情况下，看起来 rolly.js 包排除了与背景相关的样式，因为图像背景是具有某些背景样式的元素。这意味着mix-blend-mode财产，正如我提到的，财产background-image。但除此之外，整个网站运行良好。

这应该是这样的

这实际上是这样的

盒式展示

最后，这就是我试图做的：

<script>
   import rolly from "rolly.js";

   const r = rolly({
      view: document.querySelector(".app"),
      native: true,
      // other options
   });
   r.init();
</script>
<div class="app">
   <Cursor />
   <div data-scene>
      <slot/>
   </div>
</div>

阅读 171

2024-02-24

共1个答案

小能豆

根据您提供的信息，看起来您正在尝试在您的项目中使用 rolly.js 库来实现一些滚动效果。然而，您遇到了一些问题，特别是在应用滚动效果后，背景图像被排除在样式之外，导致显示异常。

这种问题通常是由于 CSS 样式的覆盖或特定属性的不兼容性引起的。在这种情况下，您提到 rolly.js 库可能排除了某些背景相关的样式，导致了显示异常。

为了解决这个问题，您可以尝试以下几点：

检查 CSS 样式覆盖： 确保 rolly.js 库没有覆盖了您的背景样式。您可以使用浏览器的开发者工具检查应用在元素上的样式，并查看是否有任何样式被覆盖或被添加。
检查 rolly.js 配置： 检查 rolly.js 的配置选项，特别是与滚动效果和背景样式相关的选项。可能会有一些选项可以控制滚动时如何处理背景样式。
尝试其他滚动库： 如果问题仍然存在，您可以尝试使用其他滚动库来实现所需的效果。有时候，与其他库的兼容性可能会更好。
自定义 CSS 样式： 如果可能的话，您可以尝试手动添加或调整背景样式，以确保它们在应用滚动效果后仍然正确显示。
与库作者联系： 如果您认为这是 rolly.js 库的问题，您可以尝试联系库的作者或查看库的文档和社区支持，以获取更多帮助和支持。

通过尝试以上方法，您应该能够解决您遇到的问题，并成功实现所需的滚动效果，而不会影响背景图像的显示。

2024-02-24