Set scroll bar

Scroll bar

Scroll bar usage

overflow-y： Management of scrollbars when the content of an area exceeds its specified height ;

overflow-x： Management of scrollbars when the content of an area exceeds its specified width ;

overflow： It's equivalent to setting overflow-x and overflow-y

Parameters :

visible： Expand the area to show everything

auto： Add a scroll bar only if the content exceeds the limit

hidden： Always hide scroll bars

scroll： Always show scroll bar

Be careful ！

1、 The setting of scroll bar only sets the fixed width （ Or high ） The block level area of is valid （ Because only block level areas can be set with width and height ）. When setting the display of scroll bars , Only when the block level content area exceeds the range of block level elements , It will be displayed in the form of a scroll bar , You can scroll through the contents , The contents will not exceed the block level area .

2、 When setting the scroll bar , Generally, only one of the horizontal scroll bar and the vertical scroll bar is set . Because the scroll bar display is set when the area is exceeded , When the longitudinal direction can be extended , If it can be extended horizontally, there will be problems . One of the scrollbars cannot be displayed on the page . Such as below , The horizontal scroll bar will not display correctly . When the page viewport has scroll bars , I have more scrollbars on the page than the viewport will display , Conflict with each other , The scroll bar in the block level area written by yourself cannot be displayed correctly .

3、 When you want to completely hide the scroll bar of the entire browser viewport , Use scroll=“no”, Can hide scroll bar ;

Scroll bar style modification

Because the default scroll bar of each browser is different , When you use the scroll bar on the page , You can modify the style of the scroll bar .

  <style> .bar {
       height: 300px; width: 250px; overflow-y: scroll; border: 1px solid #ccc; margin-left: 400px; margin-top: 50px; } /*  Set the style of the scroll bar   Wide and high 、 Background color */ ::-webkit-scrollbar {
       width: 10px; background-color: rgb(239, 217, 217); } /*  Scroll bar slider  */ ::-webkit-scrollbar-thumb {
       border: 1px solid red; border-radius: 10px; background: pink; } </style>

Scroll bar after changing the style （ The colors are exaggerated for convenience , Not beautiful , But it is easy to distinguish ）