如何使滚动条在不同transform:scale缩放比例下显示效果一致?-灵析社区

biubiuuuuu

transform:scale(1)的情况下,把滚动条设置为10px宽,此时的滚动条宽度是符合需求的。 --scrollBarHeight: 10px; ::-webkit-scrollbar { width: var(--scrollBarHeight); height: var(--scrollBarHeight); background-color: red; } transform:scale(2.5)的情况下,滚动条设置为4px时,显示效果与前者理论上应该相同,但实际上看起来偏小,设置为5px才能与前者显示效果相同。 ![](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/20e20d94a6d023f437b749f773656485.png) trasform:scale(4)的情况下,滚动条理论上应该设置为2.5px,但实际效果不是10px,看起来是2px,差的更多了。 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/23aae2a75671e541593599c300e8ffc7.png) 希望让滚动条的宽度在任何transform:scale比例中显示效果都相同。

阅读量:148

点赞量:0

问AI
金刚老六
let scrollBarHeight = '' if (this.scale > 1) { scrollBarHeight = 10 / Math.pow(this.scale, 1 / 1.5) + 'px' } else { scrollBarHeight = 10 / this.scale + 'px' } 对于放大的情况,不能直接除以scale,不是线性变化,太奇怪了。 chrome浏览器。