html - webkit-transform on overflow:auto div 在 Chrome/Safari 中产生非常宽的滚动条

Question

我正在使用带有“overflow：auto”和“-webkit-transform：scaleX（1.3）”的内容可编辑div。转换导致滚动条在 OS X 上的 Chrome/Safari 和 Windows 上的 Chrome 中变得非常宽。我的问题：

• 如何使滚动条不显示更宽（即它们的原始宽度）？

---

额外细节：

• scaleX 的值虽然在此示例中是固定的，但在派生此示例的代码中并不固定。
• 我需要动态设置滚动条的宽度以匹配变换：scaleX 因子

• 的HTML：

  <div id="overflow" contenteditable="true">Hey
    lots
    of
    text
    here
    to
    over
    flow
  </div>
  

• CSS：

  #overflow {
      width: 100px;
      height: 100px;
      white-space: pre-wrap;
      margin: 0px;
      overflow: auto;
      padding: 2px;
      border: 1px black solid;
      -webkit-transform: scaleX(1.1);
  }
  

Answer 1

因为你 -webkit-transform 将整个元素缩放了 1.1 倍的大小，所以你需要使用 ::-webkit-scrollbar 来自定义滚动条样式。

您还需要使用其他 -webkit-scrollbar 伪元素来自定义滚动条的样式。

这是演示。

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

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
  border-radius: 10px;
 }

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
 }

如果需要默认样式，需要在demo的基础上做更多的css自定义。

希望这能有所帮助。