Question

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

如何让滚动条不显示更宽（即原始宽度）？

其他详情：

scaleX的值虽然在此示例中已修复，但在此示例的派生代码中并未修复。
我需要动态设置滚动条的宽度以匹配transform：scaleX factor

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); 
 }

如果您需要默认样式，则需要根据演示进行更多css自定义。

希望这可以提供帮助。

溢出时的webkit-transform：自动div在Chrome / Safari中产生非常宽的滚动条

1 个答案: