网站滚动条很小时不可见

Question

我正在使用-webkit-scrollbar伪元素为桌面Webkit浏览器自定义React Web应用程序上的滚动条。它用于在“聊天框”之类的元素中滚动浏览消息，该元素的overflow-y属性设置为“ auto”。在大多数情况下，此功能正常运行，如下图所示（右侧的灰色滚动条）：

随着添加更多消息，灰色滚动条拇指的高度自然减小。当消息框中填充许多长消息时，就会出现问题：

拇指似乎越来越小，直到消失为止。滚动功能仍然有效。可以在下面的图片中看到（右侧的滚动条不见了）：

下面是设置滚动条样式的css代码（为了为滚动条创建“填充”，我使用了answer to this question）：

::-webkit-scrollbar {
  width: 24px; 
}
::-webkit-scrollbar-thumb {
  border: 9px solid rgba(248, 230, 230, 0);
  background-clip: padding-box;
  border-radius: 20px;
  background-color: #d9d9d9;
  box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}

我尝试通过将min-height: 5px;添加到滚动条来解决此问题，但未成功。

JSFiddle (Add more letters to see scrollbar disappear)。

任何帮助将不胜感激。

Answer 1

问题出在background-clip: padding-box;上。

当内容太长时，其高度变为0

添加高度大于5像素（约30像素）的min-height，它将正常工作。

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  word-wrap: break-word;
  overflow-y: scroll;
}

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

::-webkit-scrollbar-thumb {
  border: 9px solid rgba(248, 230, 230, 0);
  background-clip: padding-box;
  border-radius: 20px;
  background-color: #d9d9d9;
  min-height: 30px;
  box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}

 <div>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    </div>

Answer 2

大多数移动浏览器在不滚动时会自动隐藏滚动条。这样做的原因是，在已经很小的环境中，允许内容使用更多的空间。

在滚动时，滚动条应该是可见的，并且在停止滚动时消失，如在此未样式化的示例中所见（在移动/移动模式下打开。在桌面上，可能必须在启动移动模式后刷新才能正确看到效果） ）：

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appDateExpired]'
})
export class DateExpiredDirective {

@Input() checkExpired

  constructor(el: ElementRef) { 

    if(JSON.stringify(this.checkExpired) < JSON.stringify(new Date) ){
  el.nativeElement.style.color = "red";
}

}

https://codepen.io/anon/pen/bXBZRX