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比例中显示效果都相同。

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

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

AI BotBETA

要使滚动条在不同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），因为滚动条的样式在不同的浏览器引擎中有所不同。

3 个回答

得票最新

Creaty

181515

发布于
2024-02-23 辽宁

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

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