缩放时缩放元素 - HTML/CSS

【问题标题】：Scale element when zoom - HTML/CSS缩放时缩放元素 - HTML/CSS
【发布时间】：2020-06-08 16:09:45
【问题描述】：

我有一个高度为 31.25em 的滚动条。现在这看起来很好，因为它在屏幕上，但是如果我通过网络浏览器从 100% 放大到 110%，滚动条的大小似乎会增加。我的问题是如何缩放滚动条以使其在缩放后看起来正确？

.scrollText{

   max-height: 31.25em;
   overflow: auto;
   padding-right: 1em;
   padding-bottom: 2em;
 }

【问题讨论】：

标签： html css

【解决方案1】：

使用媒体查询和滚动条 webkit 元素更改滚动条大小

基本介绍

首先，在大多数浏览器上，滚动条在放大时保持相同的大小。但是，如果您想更改滚动条的大小，您可以使用媒体查询和滚动条 CSS 元素来使滚动条的大小随着您减小放大。

建议的解决方案

你可能会使用这样的东西：

@media only screen and (min-width:150px) and (max-width:600px){
   body::-webkit-scrollbar {
     width: 1em;
   }
}

其他资源

查看here 了解滚动条大小的更多信息，查看here 了解有关媒体查询的更多信息

【讨论】：