Sass滚动条Mixin在textarea生效，普通div不生效的原因

问题背景 #

我参考示例实现了如下Sass滚动条Mixin：

@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white,  50%)) {
  // For Google Chrome
  &::-webkit-scrollbar {
    width:  $size;
    height: $size;
  }

  &::-webkit-scrollbar-thumb {
    background: $foreground-color;
  }

  &::-webkit-scrollbar-track {
    background: $background-color;
  }

  // For Internet Explorer
  & {
    scrollbar-face-color: $foreground-color;
    scrollbar-track-color: $background-color;
  }
}

将该Mixin通过.scrollable类应用到.textarea元素上时，滚动条样式成功替换：

.scrollable {
    @include scrollbars(.3em, #bbb, #245662);
}

.textarea {
    border: 5px solid #73B3C9;
    background: #245662;
    padding: 15px;
    @extend .scrollable;
}

但把.scrollable类应用到动态生成的普通<div>（内联样式设置了overflow-x: scroll等属性）时，滚动条样式未生效，请问原因是什么？

原因分析 #

• 滚动条未真正触发显示：如果动态<div>的内容没有超出容器横向范围，即便设置了overflow-x: scroll，浏览器只会渲染一个不可交互的空滚动条，自定义样式会因为滚动条本身不可见而看起来没生效。需确保容器内容确实超出宽度，让滚动条处于可交互状态。

• 浏览器兼容性遗漏：当前Mixin只适配了WebKit内核浏览器（Chrome、Edge等）和IE，未处理Firefox的自定义滚动条逻辑。Firefox需要通过scrollbar-width和scrollbar-color属性来定义滚动条样式，若在Firefox中测试动态div，自然看不到自定义效果，而textarea因浏览器对表单元素的默认滚动条处理特殊，刚好生效。

• 类名挂载或样式冲突问题：先确认动态生成的<div>是否正确添加了.scrollable类；另外，若页面存在其他全局滚动条样式（比如div::-webkit-scrollbar），可能和.scrollable的样式产生优先级冲突，导致自定义样式被覆盖。

• 样式视觉辨识度低：Mixin中同时设置了纵向滚动条宽度和横向滚动条高度，若动态div只有横向滚动，且设置的$size过小，或者前景色/背景色与容器背景过于接近，会导致滚动条样式不明显，容易误以为未生效。

内容的提问来源于stack exchange，提问作者Hydroper