html - 溢出时的 webkit 转换 :auto div results in very wide scrollbar in Chrome/Safari

Question

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

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

---

其他详细信息:

• scaleX 的值虽然在此示例中是固定的，但在派生此示例的代码中并未固定。
• 我需要动态设置滚动条的宽度以匹配 transform: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伪元素来自定义滚动条的样式。

这是 DEMO .

::-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自定义。

希望这对您有所帮助。