html scroll bar style setting-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

html scroll bar style setting

Nov 22, 2017 pm 01:33 PM

html scroll set up

If you need to set a scroll bar for DIV, then you may need to set the style of the scroll bar, horizontally or vertically. You need to use overflow-y and overflow-x to set it today. Let me tell you about these two attributes.

Set the scroll bar for the div and set its horizontal scroll bar and vertical scroll bar styles. The required CSS styles are overflow-y and overflow-x to 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.

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

overflow-y:visible: Do not cut the content Do not add vertical scroll bar

Instance of div setting scroll bar

By setting the div width, div height, div border style for the first DIV object, and adding demonstration text content in the DIV box, Set the same CSS style for the second box, the same text content, and set horizontal and vertical scroll bars to observe the effect.

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

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

&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
&lt;meta charset=&quot;gb2312&quot; /&gt; 
&lt;title&gt;div滚动条 在线演示 &lt;/title&gt; 
&lt;style&gt; 
.div-a,.div-b{ width:150px; height:100px; float:left; border:1px solid #F00} 
.div-b{ margin-left:10px;overflow-y:scroll; overflow-x:scroll;} 
/* css注释说明：设置第二个盒子与第一个盒子间距为10px，并设置了横纵滚动条样式 */ 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;div class=&quot;div-a&quot;&gt;测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容&lt;/div&gt; 
 
&lt;div class=&quot;div-b&quot;&gt;测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容&lt;/div&gt; 
&lt;/body&gt; 
&lt;/html&gt;

Copy after login

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 ".div-b".

Explanation: The first box ".div-a" has too much content and overflows the DIV box. The two boxes have scroll bar styles set up, so there is no overflow. The vertical right side (Y) has a scroll bar style that can be pulled down and up. The horizontal bottom (X) has a scroll bar effect but cannot be pulled left or right. This is because the text content cannot be stretched. Open the DIV width. If it is a picture greater than the DIV setting width, a scroll bar effect will appear at the horizontal bottom (X).

Related recommendations:

How to set the link style with CSS

How to use checkbo in HTML How to modify the HTML title tag element using

The above is the detailed content of html scroll bar style setting. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn