javascript - 向上或向下移动滚动条拇指时保持原位的滚动条框阴影

Question

我正在尝试制作自定义框阴影样式。

它需要看起来像这样：

这是我的代码：

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

}

::-webkit-scrollbar-track {
  background: #2B2F35;
  border-radius: 10px;
  border: 2px solid rgba(82, 95, 115, 0.5);
  border-right: none;
}

::-webkit-scrollbar-thumb {
  background: #2B2F35;
  box-shadow: -2px -2px 2px #3C4655 , 2px 2px 2px #08090B;
  border-radius: 8px;
  width: 11px;
}

此时，它看起来像这样：

有没有人对如何在 CSS 本身中解决这个问题提出建议。首先，我想尝试不使用 JavaScript。如果没有其他选择，我将创建一个基于 JavaScript 的自定义滚动条。

预先感谢您的帮助。

标签： javascripthtmlcssreactjsscrollbar