How to add scroll bars to css

Editor to share with you how to add css scroll bar, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. You can use the overflow property to set whether the scroll bar appears.

This attribute defines what happens to the content that overflows the content area of the element. If the value is scroll, the user agent provides a scrolling mechanism whether it is needed or not. Therefore, it is possible that a scroll bar will appear even if everything can be dropped in the element box.

Overflow:scroll / * x y direction will be * / or overflow-x:scroll / * is only x direction * / or overflow-y:scroll / * only y direction * /

Overflow-y: sets how to manage content when the content of an object exceeds its specified height

Overflow-x: sets how to manage content when the content of an object exceeds its specified width

Parameters:

Visible: expand the area to show everything

Auto: add scroll bars only if the content exceeds the limit

Hidden: always hide the scroll bar

Scroll: always show scroll bar

When the block-level content area is out of the block-level element range, it will be displayed in the form of a scroll bar, you can scroll the content inside, the content will not go beyond the block-level area.

2. Use scrollbar property to set scroll bar style

::-the whole part of the webkit-scrollbar scroll bar

::-buttons at both ends of the webkit-scrollbar-button scroll bar

::-webkit-scrollbar-track outer orbit

::-webkit-scrollbar-track-piece inner track, scroll bar middle part (remove)

::-the one that can be dragged in the webkit-scrollbar-thumb scroll bar

::-webkit-scrollbar-corner corner

::-webkit-resizer defines the style of the drag block in the lower right corner

Example

/ * define the dimensions of the horizontal and vertical scroll bars corresponding to the height and width of the scroll bar and the background height and width, respectively * /::-webkit-scrollbar {width:16px; height:16px; background-color:#F5F5F5;} / * define the shadow + fillet in the scroll bar track * /::-webkit-scrollbar-track {- webkit-box-shadow:inset 00 6px rgba; border-radius:10px; background-color:#F5F5F5 } / * define the shadow inside the slider + fillet * /::-webkit-scrollbar-thumb {border-radius:10px;-webkit-box-shadow:inset 00 6px rgba; background-color:#555;} this is all the content of the article "how to add a scroll bar in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!