Javascript 如何使用隐藏但功能强大的滚动条让元素在滚动时消失？

我正在制作一个用户可以向下滚动的页面。滚动条是隐藏的，但功能性推到带有内部和外部div以及右侧的一侧：-17px

在这个论坛上，我看到了一些滚动消失的解决方案，但只是在jQuery中，但我想在使用任何库之前先学习纯/普通JavaScript

我试图编写自己的简单JS代码。当我没有隐藏滚动条时，它第一次起作用了，似乎我必须在JS代码中更改一些东西

以下是我的代码：我还在下面创建了一个代码段来模拟：

window.addEventListenerscroll，scrollEffectOne； 功能一 { var hidethis=document.getElementByIdbox； hidethis.style.opacity=0.1； } * { 边际：0px； 填充：0px； 字体系列：Arial； } 外面的 { 身高：100%； 宽度：100%； 溢出：隐藏； 位置：绝对位置； } 内部的 { 顶部：0px； 右：-17px； 底部：0px； 左：0px； 位置：绝对位置； 溢出x：隐藏； } 第1帧 { 顶部：0px； 身高：100%； 宽度：100%； 位置：绝对位置； 背景图像：线性梯度225deg，22E1FF 0%，1D8FE1 48%，625EB1 100%； } 框架2 { 最高：100%； 身高：100%； 宽度：100%； 位置：绝对位置； 背景图像：线性梯度225度，D4FFEC 0%，57F2CC 48%，4596FB 100%； } 框架3 { 最高：200%； 身高：100%； 宽度：100%； 位置：绝对位置； 背景图像：线性梯度225deg，473B7B 0%，3584A7 51%，30D2BE 100%； } 盒 { 宽度：350px； 高度：100px； 转化：转化-50%，-50%； 最高：50%； 左：50%； 位置：绝对位置； 背景色：rgba0,0,0,3； 边界半径：10px； 不透明度：1； } 方框a { 不透明度：1； 字体大小：15px； 颜色：白色； 转化：转化-50%，-50%； 左：50%； 最高：50%； 位置：绝对位置； } 方框b { 颜色：RGBA255255.3； } 测验 滚动时隐藏我！

---

您的代码看起来是正确的，但直到我将useCapture选项更改为true，它才起作用。老实说，我不知道为什么这是真的

window.addEventListenerscroll，scrollEffectOne，true

---

阅读更多关于这里的内容：

不透明度不是一个字符串，它是一个数字。这是什么意思？是否必须将0.1更改为0.1？@epascarello这是不正确的，该值以任何方式转换为字符串0.1或0.1，无论哪种方式都会在分配时变为“0.1”。我替换了它，但不幸的是它仍然不起作用…您的代码看起来不错，但在我将useCapture选项更改为true之前它不起作用。老实说，我不知道为什么这是真的。window.addEventListenerscroll，scrollEffectOne，true；阅读更多关于这里的内容：非常感谢！它适用于所有浏览器还是只适用于firefox？