如何添加独特的滚动效果答案

【问题标题】：How to add unique scrolling effect如何添加独特的滚动效果
【发布时间】：2022-07-19 04:30:17
【问题描述】：

我想添加类似于苹果页面中使用的滚动效果，例如this one。我将如何使用 HTML、CSS 和 JavaScript 做到这一点？

【问题讨论】：

您希望重现什么具体效果？你被困在哪里了？当您尝试重现这种效果时遇到了哪些困难？

【解决方案1】：

您可以使用webkit 访问浏览器内的元素并自行决定对其进行自定义。

body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar);
    outline: none;
    border-radius: 10000px;
    overflow: hidden;
}

您可以使用-webkit-scrollbar 访问此元素，使用-webkit-scrollbar-track 设计滚动条位置，并使用-webkit-scrollbar-thumb 设计滚动条本身。

另外，不要在 StackOverFlow 中寻找现成的代码，它是最好学习如何使用它。

【讨论】：

webkit 不是只在 Chrome 和 Safari 上，而且非标准吗？
这似乎是最合乎逻辑的方式，我认为这方面没有问题。大多数开源项目都使用这种方式。
大多数开源项目都使用这个和其他选项来获得更好的浏览器支持。如果您知道任何类型的 scrollbar 或 scrollbar-track 或 scrollbar-thumb 只是没有 webkit 这是一个标准，那么它会完美地工作。

【解决方案2】：

您可以轻松使用 wow js 滚动效果。这是链接-https://www.delac.io/WOW/ 看看这很容易使用。还有许多用于滚动效果的库和插件- https://www.hongkiat.com/blog/scrolling-effects-js-libraries/

【讨论】：

【解决方案3】：

有一个很酷的 own-scrolls 库 https://www.npmjs.com/package/own-scrolls 允许您自定义滚动，而不会为 vanilla js 上的项目带来不必要的问题

【讨论】：