-1

I have an scrollbar which height is 31.25em. Now this looks fine as it is on screen but if I zoom in via the web browser like from 100% to 110%, the scroll bar seems to increase in size. My question is how to scale the scroll bar so that it looks correct after zoom?

.scrollText{

   max-height: 31.25em;
   overflow: auto;
   padding-right: 1em;
   padding-bottom: 2em;
 }
BruceyBandit
  • 3,978
  • 19
  • 72
  • 144
  • Does this help? https://stackoverflow.com/questions/22223866/media-queries-for-different-zoom-levels-of-browser – enhzflep Feb 25 '20 at 00:59

1 Answers1

1

Changing scroll bar size with media queries and scrollbar webkit element

Basic Introduction

Firstly on most browsers the scroll bar stays the same size when zooming in. However if you want to change you scroll-bar size you can probably use media queries and the scrollbar CSS element to make the scroll-bar size decrease as you zoom in.

Proposed solution

You can probably use something like this:

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

Other resources

See here for further reading on scroll bar size and here for more info on media queries

Alex Hawking
  • 1,125
  • 5
  • 19
  • 35