About scroll bars in HTML/removing scroll bars

1.Xhtml scroll bar color problem

In the original html, we can define the scroll bar of the entire page like this:

body{

scrollbar -3dlight-color:#D4D0C8; /*- Outer left-*/

scrollbar-highlight-color:#fff; /*- Second from left-*/

scrollbar-face- color:#E4E4E4; /*-face-*/

scrollbar-arrow-color:#666; /*-arrow-*/

scrollbar-shadow-color:#808080; / *- Second from the right-*/

scrollbar-darkshadow-color:#D7DCE0; /*- First from the right-*/

scrollbar-base-color:#D7DCE0; /*- Base color- */

scrollbar-track-color:#;/*- Slider-*/

}

But the same code cannot be used under xhtml It worked. I believe many good friends have encountered the same problem.

So how can I apply the scroll bar style under xhtml? Look at the following code:

html{

scrollbar-3dlight-color:#D4D0C8; /*- outermost left-*/

scrollbar-highlight-color:#fff ; /*- Second from left-*/

scrollbar-face-color:#E4E4E4; /*- Face-*/

scrollbar-arrow-color:#666; /*- Arrow -*/

scrollbar-shadow-color:#808080; /*- Second from the right-*/

scrollbar-darkshadow-color:#D7DCE0; /*- First from the right-*/

scrollbar-base-color:#D7DCE0; /*- base color-*/

scrollbar-track-color:#;/*- slide track-*/

}

The only difference between this code and the previous paragraph is that among the elements defined by css, one is body and the other is html. Let's test it again and change the "body" of the html page to "html" to test it and find that the effect can still be achieved. So why?

Let’s take a look at the picture below:



This is the most basic dom tree structure of HTML.

Let’s take a look at the definitions of html and xhtml:



HTML (Hyper Text Markup Language, Hyper Text Markup Language), Hyper Text Markup Language is widely used on the Internet Above. HTML describes how the text base is rendered and how hyperlinks connect to other pages.

XHTML (Extensible Hypertext Markup Language, Extensible Hypertext Markup Language) is a markup language whose expression is similar to HTML, but the syntax is more strict. In terms of inheritance relationship, HTML is an application based on SGML and is very flexible, while XHTML is based on XML, which is a subset of SGML. XHTML 1.0 became a W3C recommendation on January 26, 2000.

Literally, xhtml has one more x than html, so this x is actually xml. Why do we need to add xml in it? In fact, the most fundamental reason is to make html more structured and standardized (because html is really bad).

OK, let’s go back and look at the structure tree above. What we define in html is body. Because html is not very standard, this can take effect, but in xhtml this will not work. I look at the picture. Obviously, the body tag itself is not the root element, only html is the root element, and the scroll bar of the page also belongs to the root element, so this is why our definition of body has no effect, because what we define is only a sub-element. OK, we know the principle, let’s do an experiment. If we change the definition of “body” or “xhtml” to “*”:

*{

scrollbar-3dlight-color:#D4D0C8; /*- Outer left-*/

scrollbar-highlight-color:#fff; /*- Second from left-*/

scrollbar-face-color:#E4E4E4; /*- Face-*/

scrollbar-arrow-color:#666; /*- Arrow-*/

scrollbar-shadow-color:#808080; /*- Second from the right-*/

scrollbar-darkshadow-color:#D7DCE0; /*- Right one-*/

scrollbar-base-color:#D7DCE0; /*- Base color-*/

scrollbar-track-color:#;/*- Slider-*/

}

is passed in both html and xhtml, because * is to define any tag on the page, of course it also includes " html" tag.

(ps: In fact, it is not so much the difference between html and xhtml as it is the difference between whether there is XHTML 1.0 transitional doctype, but if you remove the XHTML 1.0 transitional doctype from the page, then this page will not have a doctype , the default display mode is html4.01, but you have to change the XHTML 1.0 transitional doctype to HTML 4.01 doctype. The same page definition body will not have any effect, although the standard of this page is html 4.01)

2 , The problem of horizontal scroll bars on frame pages under xhtml

When using IE6 to browse xhtml pages with frames, the horizontal and vertical scroll bars will appear together by default. This is a bug in IE6, and it is in Firefox. Normally, the reason is due to a flaw in its interpretation of the XHTML 1.0 transitional doctype.

There are generally 3 solutions to this bug,

Method 1:

Code:

html { overflow-y: scroll; }

Principle: Force the display of IE's vertical scroll bar and ignore the horizontal scroll bar.

Advantages: Completely solves this problem, allowing you to maintain the complete XHTML doctype.

Disadvantages: Vertical scroll bars will appear even when the page does not require vertical scroll bars.

Method 2:

Code:

html { overflow-x: hidden; overflow-y: auto; }

Principle: Hide horizontal scrolling, and vertical scrolling is adaptive according to the content.

Advantages: Visually solves this problem. Vertical scrollbar is not forced to appear when not necessary.

Disadvantages: It only hides the horizontal scroll bar. If the page really needs the horizontal scroll bar, the content outside the screen will not be visible because the user cannot scroll horizontally.

Method 3:

Code:

body { margin-right: -15px; margin-bottom: -15px; }

Principle: This will Add a negative value to the margin horizontally and vertically. After IE adds this exact value, it will remove the illusion of the need for scroll bars.

Advantages: This problem is solved visually, and vertical scrolling is adaptive according to the content.

Disadvantages: Since the 15px margin is "artificially created", the filled screen area cannot be used.



Remove the horizontal scroll bar:



Remove the vertical scroll bar:



Hide the horizontal scroll bar and display the vertical scroll bar:

< body style="overflow-x:hidden;overflow-y:scroll">

Hide all



Or



Here is the attribute code of the scroll bar:

overflow-y: visible | auto | hidden | scroll

visible: Does not cut content or add scroll bars.

auto: Cut the content and add scroll bars when needed

hidden: Do not display content that exceeds the height of the object. This property will not be introduced here. If you like it, you can try it yourself

scroll: Always display the vertical scroll bar

First of all, let me talk about how to remove the scroll bar:

If you use the Baidu style template, there can only be one scroll bar, that is The largest browser window scroll bar on the right side of the entire space is the scroll bar that I have beautified. Now let me tell you, we can remove this scroll bar, but it will not affect the browsing method:

In body # Just add overflow-y:

visible to
##{}, so that the scroll bar will not be displayed. You may ask, how to pull it down like this? Haha, since I said it will not affect browsing, of course there is a way. The way to browse is to use the mouse wheel. Although the scroll bar is gone, the mouse wheel can still scroll the web page up and down. I believe that when you generally browse the web, you use the scroll wheel to scroll down the web page more times than you directly drag the scroll bar with the mouse

, right? As a reminder, if you meet a friend who has no scroll bar and no scroll wheel on his mouse, how should he browse the web? Haha, you can use PageUp and PageDown

above the arrow keys on the keyboard to turn pages up and down. You can also use Space to pull down web pages and Shift+Space to pull up web pages. Another method is to use the up and down arrow keys. To pull, you can also press the Home key to return to the top of the web page, and the End key to

to reach the bottom of the web page. Haha, are there many ways? However, this will always cause some inconvenience, so you can consider whether to cancel this scroll bar according to your own space and preferences.

Haha, I didn’t expect to say so much at once

Let’s talk about how to add a scroll bar:

overflow-y: auto;height: How many px

auto

is to automatically determine whether to add a scroll bar. When the set object content exceeds the height set by height, the scroll bar will be automatically added. Otherwise, it will not be displayed. The default value in body{} is

overflow-y: auto;height: browser height, so when the web page content exceeds the browser height, a scroll bar will automatically appear on the right side of the browser

If you need to set this, I suggest setting it in the latest comments #m_comment{}, article list #m_blog{} and other templates where the content and height are not fixed. Some friends find If you don’t have IDs for these model

versions, you may only have IDs such as #m_comment p.item{} or #m_pro a{}, etc. Then you can add the IDs you don’t have so that you can set them

Here is another way to add a scroll bar:

overflow-y :scroll

The function of this parameter has been explained above, but if you only add this parameter, although The scroll bar will be displayed, but the scroll bar will not be displayed, so you must add a

height: how many px

height attribute, which is similar to the above method, but there are fundamental differences , no matter whether the height of the object content exceeds the height set by height, the scroll bar will always be displayed on the side

Let’s talk about the beautification of the scroll bar. My friend showed me this online A note, I think the picture above is very good, but it is very small, so I doubled the size and it looks much clearer. Let’s first talk about the various attributes of beautification:

SCROLLBAR-FACE-COLOR: Color code;

SCROLLBAR-HIGHLIGHT-COLOR:Color code;

SCROLLBAR-SHADOW-COLOR: color code;

SCROLLBAR-3DLIGHT-COLOR: color code;

SCROLLBAR-ARROW-COLOR: color code;

SCROLLBAR-TRACK-COLOR : Color code;

SCROLLBAR-DARKSHADOW-COLOR: Color code;

Are you a little bit excited when you see so many attributes? Haha, don’t worry, you will feel much better if you take a look at the twice-enlarged illustration I just mentioned:

There is also a scrollbar-base- on the picture in this

The attribute of color, in fact, this attribute is the sum of the above 7 attributes. How do you say it? That is, after you set the color of this attribute, you no longer need to set the previous 7 attributes. The scroll bar will automatically be set for you, but this setting will be based on the scrollbar you set. -The color of -base-color is automatically set

. The advantage of this attribute is that it does not require everyone to study the colors of various places, but the disadvantage is that it cannot blend all the colors into one. .

Note: If scrollbar-base-color is set, do not set the other seven attributes. If the other seven attributes are set, do not set scrollbar-base-color, otherwise there may be conflicts. , there will be some effects that don’t work

Finally, considering that everyone may like my beautification code [so stinky~], I posted my beautification code:

SCROLLBAR -FACE-COLOR: #CCFFFF;

SCROLLBAR-HIGHLIGHT-COLOR: white;

SCROLLBAR-SHADOW-COLOR: #813533;

SCROLLBAR-3DLIGHT-COLOR: # 813533;

SCROLLBAR-ARROW-COLOR: #813533;

SCROLLBAR-TRACK-COLOR: white;




##
-->

The above is the detailed content of About scroll bars in HTML/removing scroll bars. For more information, please follow other related articles on the PHP Chinese website!