css - 如何使滚动条在不同transform:scale缩放比例下显示效果一致？

Question

transform:scale(1)的情况下，把滚动条设置为10px宽，此时的滚动条宽度是符合需求的。

--scrollBarHeight: 10px;::-webkit-scrollbar {    width: var(--scrollBarHeight);    height: var(--scrollBarHeight);    background-color: red;}

transform:scale(2.5)的情况下，滚动条设置为4px时，显示效果与前者理论上应该相同，但实际上看起来偏小，设置为5px才能与前者显示效果相同。

trasform:scale(4)的情况下，滚动条理论上应该设置为2.5px，但实际效果不是10px，看起来是2px,差的更多了。

希望让滚动条的宽度在任何transform:scale比例中显示效果都相同。

Answer 1

一样大的，你transform-origin有问题吧

DEMO

Answer 2

那你再加一层容器,把缩放只缩放内容,不和scrollbar缩放

Answer 3

    let scrollBarHeight = ''    if (this.scale > 1) {      scrollBarHeight = 10 / Math.pow(this.scale, 1 / 1.5) + 'px'    } else {      scrollBarHeight = 10 / this.scale + 'px'    }

对于放大的情况，不能直接除以scale，不是线性变化，太奇怪了。
chrome浏览器。

Answer 4

要使滚动条在不同transform:scale缩放比例下显示效果一致，我们需要对滚动条的宽度进行动态调整。由于滚动条的宽度与页面的缩放比例有关，我们需要使用CSS变量和calc()函数来计算滚动条的宽度。

以下是一个示例的CSS代码，用于动态调整滚动条的宽度：

--scrollBarHeight: 10px;::-webkit-scrollbar {  width: var(--scrollBarHeight);  height: var(--scrollBarHeight);  background-color: red;}/* 动态调整滚动条宽度 */@media (transform-scale: 2.5) {  ::-webkit-scrollbar {    width: calc(var(--scrollBarHeight) * 2.5);  }}

在上面的代码中，我们首先定义了一个CSS变量--scrollBarHeight，表示滚动条的高度。然后，在滚动条伪元素上设置宽度和高度为该变量的值。接下来，我们使用@media查询来针对不同的缩放比例动态调整滚动条的宽度。在这个示例中，当页面缩放比例为2.5时，我们使用calc()函数将滚动条的宽度设置为--scrollBarHeight的2.5倍。

通过这种方式，无论页面的缩放比例如何变化，滚动条的宽度都会根据需要进行动态调整，以保持一致的显示效果。请注意，这种方法只适用于使用WebKit浏览器引擎的浏览器（如Chrome和Safari），因为滚动条的样式在不同的浏览器引擎中有所不同。