How to set scroll bar in DIV

In the actual operation process, we know that many DIVs are not enough to display all the content, so the scroll bar must be set. Today I will teach you how to set the scroll bar of DIV.

Set the scroll bar for the div and set its horizontal scroll bar and vertical scroll bar styles. The required CSS styles areoverflow-yandoverflow-xto set the right and bottom scroll bar effects of the div box object. At the same time, you can also use CSS styles to hide the scroll bar of the html frame iframe. I will introduce it to you next.

1. Basic understanding of CSS - TOP

##overflow-y:scroll; Always display the vertical scroll bar

overflow-y: visible: does not cut the content or add a vertical scroll bar

Understand: overflow-y manual http://www.divcss5.com/shouce/c_overflowy.shtml

overflow-x:scroll ; Always display horizontal scroll bars

overflow-x:visible: Do not cut content or add horizontal scroll bars

Learn more: overflow-x manual http://www.divcss5.com /shouce/c_overflowx.shtml

Understand css overflow

2. div setting scroll bar example

DIVCSS5 by setting the first DIV The object sets the div width, div height, and div border style, and adds demonstration text content in the DIV box. The second box sets the same CSS style, the same text content in the box, and sets horizontal and vertical scroll bars to observe the effect.

The CSS of the first box is named "divcs5-a", and the style selector of the second DIV box is named "divcss5-b".

1. The specific and complete html source code is as follows:

In order to observe the effect, we set the same CSS style and the same text content for both DIV boxes. X and y (horizontal and vertical scroll bar styles) are set for ".divcss5-b".

The first box ".divcss5-a" has too much content and overflows the DIV box, and the second The box has a scroll bar style set, so there is no overflow. A pull-down scroll bar style appears on the right side (Y) of the vertical direction. Horizontally

How to hide CSS div scroll bars

DIV does not have scroll bars by default. If a scroll bar style is added, the scroll bar will naturally disappear after being removed. If it is a scroll bar that appears in an iframe, if you want to hide the scroll bar horizontally in visible or overflow-y:hidden can hide the scroll bar.

Related reading:

css ripple animation

How to insert spaces in HTML Method

Add or remove HTML dom element

The above is the detailed content of How to set scroll bar in DIV. For more information, please follow other related articles on the PHP Chinese website!