Webkit 滚动条边框动画

Question

我想为滚动条添加发光效果。是否有任何 webkit 滚动条边框颜色选项？有人知道吗？

   ::-webkit-scrollbar {
    width: 12px;
}


/* Track */
::-webkit-scrollbar-track {
    border:1px solid #eee;
}


/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 0px;
    background: #aaaaaa; 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: #eee; 
}
::-webkit-scrollbar-thumb:hover{
    background: #cccccc;
}

Answer 1

这取决于您想要发光的元素，但是要在任何项目上获得 'glow'，您可以使用 box-shadow 和 x y radius spread color 如果您愿意，可以忽略传播以及颜色（如果您希望框阴影为黑色）。

所以：

box-shadow: 0 0 1em 0 #000

等于：

box-shadow: 0 0 1em;

所以，如果你想让整个滚动条发光：

::-webkit-scrollbar {
  width: 12px;
  box-shadow: 0 0 1em #f00;
}

或仅拇指：

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 0;
  background: #aaaaaa;
  box-shadow: 0 0 1em #f00;
}

Webkit 滚动条边框动画

Web kit Scroll bar border animation

css

webkit

scrollbar