Javascript 允许滚动并单击以浏览重叠的Div

客户的网站设计是深青色的，他不喜欢滚动条，因为它破坏了其他风格。他还希望我在没有第三方库的情况下完成这项工作，并且希望我能以他能够理解的方式完成这项工作。所以我能想到的唯一方法就是创建一个div，将其设置为

位置：绝对，与主题的其余部分相同的背景色，然后设置
不透明度：0.8使其看起来“混合”得更好

他对这个结果很满意，因为它适用于所有浏览器，他认为当他第一次看到它时，我甚至创建了自己的滚动条。但问题是，如果一个人真的想点击滚动条，他们不能，因为滚动条上方有一个div。有没有办法让一个div可见，但是所有的点击和悬停以及所有的东西都会通过它进入下一个div？在滚动条上方时，滚动也不起作用，因为我在与实际有滚动条的div重叠的div中

非常感谢您的帮助

编辑：添加图像以显示我的意思，滚动条上方只有一个div，用于将其与环境的其余部分“混合”，但当您将鼠标悬停在滚动条上时，它会对重叠的div执行所有操作，使滚动条在返回到实际div之前不再工作

编辑2：更新的图像


这不是您所希望的答案，但我认为不可能在滚动条上保留颜色覆盖并在所有浏览器中使用它

在背景上设置
z-index:-1
可以在Chrome中实现您想要的功能，但在Firefox中，滚动条保持白色


Firefox如下所示。在Chrome中，滚动条在不使用时消失，并在teal背景下保持功能


铬：

在CSS中创建一个类，并将其应用于您希望能够单击的任何元素

.avoid-clicks { pointer-events: none; }


指针事件：无阻止指定HTML元素上的所有单击、状态和光标选项
指针事件：继承将使用元素父级的指针事件值

指针事件：自动恢复默认功能
没有理由投反对票。代码可能会有所帮助，但自定义彩色滚动条是一个有趣的挑战。我很乐意提供代码，但所有代码都是一个div，其绝对位置正好位于滚动条上方，不透明度为0.8，因此它将滚动条与设计的其余部分“混合”。如果我的解释没有道理，我可以打个比方吗？谢谢你的帮助我在我的答案中加了一把小提琴，因为我认为你的代码是什么。也许它会帮助你头脑风暴其他方法，将提供你所需要的。非常感谢你的帮助。z-index不起作用的原因是，它只会将当前重叠的div放在滚动条div的后面，从而使滚动条返回到明亮的白色，从而“破坏”其余的设计颜色，使重叠div一开始就毫无意义。我希望我说的有道理，抱歉给你添麻烦了，你已经说过它不起作用了。但这也不能满足我在Chrome中的需求？粘贴了我在Chrome中看到的内容——如果我理解正确的话，这似乎就是你想要的。这很奇怪，在我的Chrome中看起来不是这样的。不过，问题是有太多Firefox用户无法忽视：（我知道Chrome甚至有定制的滚动条css，允许你完全创建自己的风格，但firefox没有我读过和尝试过的许多线程的支持。我相信即使IE也支持它，他们是我读到的第一个支持它的人，尽管现在它可能会被弃用。不过，我还是非常感谢你或者你的帮助，谢谢