About scroll bar in HTML/removing scroll bar

1. The color of the scroll bar under xhtml

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

Copy code

The code is as follows:

body{
scrollbar-3dlight-color:#D4D0C8; /*- Outermost left-*/
scrollbar-highlight-color:#fff; /*- left second -*/
scrollbar-face-color:#E4E4E4; /*- face-*/
scrollbar-arrow-color:#666; /*- Arrow-*/
scrollbar-shadow-color:#808080; /*- Second from right-*/
scrollbar-darkshadow-color:#D7DCE0; /*- Right one-*/
scrollbar-base-color:#D7DCE0; /*- Base color -*/
scrollbar-track-color:#;/*- slide track-*/
}

But the same code doesn't work when we apply it under xhtml. I believe many friends have encountered the same problem.

So how can we apply the scroll bar style in xhtml? Look at the following code:

Copy code

The code is as follows:

html{
scrollbar-3dlight-color:#D4D0C8; /*- Outermost left-*/
scrollbar-highlight-color:#fff; /*- left second -*/
scrollbar-face-color:#E4E4E4; /*- face-*/
scrollbar-arrow-color:#666; /*- Arrow-*/
scrollbar-shadow-color:#808080; /*- Second from right-*/
scrollbar-darkshadow-color:#D7DCE0; /*- Right one-*/
scrollbar-base-color:#D7DCE0; /*- Base color -*/
scrollbar-track-color:#;/*- slide track-*/
}

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

Let’s take a look at the following picture:

This is the most basic DOM tree structure of HTML.

Let's look at the definitions of html and xhtml:

HTML (Hyper Text Markup Language) is widely used on the Internet. HTML describes how text bases are presented and how hyperlinks connect to other pages.

XHTML (Extensible Hypertext Markup Language) is a markup language that is similar to HTML in expression, but has stricter syntax. In terms of inheritance, 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 speaking, xhtml has one more x than html, so this x actually means xml, so 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 to the structure tree above. We defined body in html, and this works because html is not very standard. But it doesn't work in xhtml. I look at the picture and it is obvious that the body tag itself is not the root element. Only html is the root element, and the scroll bar of the page is also a root element. So this is why defining body has no effect, because we only defined a sub-element. OK, we know the principle, let's do an experiment if we replace the definition "body" or "xhtml" with "*":

Copy code

The code is as follows:

*{
scrollbar-3dlight-color:#D4D0C8; /*- Outermost left-*/
scrollbar-highlight-color:#fff; /*- left second -*/
scrollbar-face-color:#E4E4E4; /*- face-*/
scrollbar-arrow-color:#666; /*- Arrow-*/
scrollbar-shadow-color:#808080; /*- Second from right-*/
scrollbar-darkshadow-color:#D7DCE0; /*- Right one-*/
scrollbar-base-color:#D7DCE0; /*- Base color -*/
scrollbar-track-color:#;/*- slide track-*/
}

It passes both html and xhtml because * defines any tag on the page, including the "html" tag.

(ps: In fact, it is better to say that the difference between html and xhtml is the difference between having or not having XHTML 1.0 transitional doctype. However, if you remove the XHTML 1.0 transitional doctype from a page, then the page will have no doctype and the default display mode will be html4.01. However, if you change the XHTML 1.0 transitional doctype to HTML 4.01 doctype, defining the body of the page will have no effect, even though the standard of this page is html 4.01)

2. The problem of horizontal scroll bar on frame page under xhtml

When browsing XHTML pages with frames with IE6, horizontal and vertical scroll bars will appear by default. This is a bug in IE6. It is normal on Firefox. The reason for this is the defect in its interpretation of XHTML 1.0 transitional doctype.

There are generally 3 solutions to this bug:

Method 1:

Code:

html { overflow-y: scroll; }

Principle: Force the vertical scroll bar of IE to be displayed, while ignoring the horizontal scroll bar.
Pros: Completely solves this problem, allowing you to keep a full XHTML doctype.
Disadvantage: A vertical scroll bar appears even when the page does not need one.

Method 2:

Code:

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

Principle: Hide horizontal scrolling and adapt vertical scrolling to the content.
Advantages: This solves the problem visually. The vertical scroll bar is not forced to appear when it is not necessary.
Disadvantages: It only hides the horizontal scroll bar. If the page really needs a 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; }

How it works: This adds a negative value to the horizontal and vertical margins. IE adds this exact value to remove the illusion of a scroll bar being needed.
Advantages: This problem is solved visually, and vertical scrolling is adaptive based on the content.
Disadvantage: Since the 15px margin is "artificially created", the filled screen area cannot be used.

<body scroll=no>

Remove the horizontal scroll bar:
<body style="overflow-x: hidden">
Remove the vertical scroll bar:
<body style="overflow-y: hidden">

Hide the horizontal scroll bar and show the vertical scroll bar:
<body style="overflow-x:hidden;overflow-y:scroll">

Hide all
<body style="overflow:hidden">

or
<body scroll="no">

Here is the attribute code of the scroll bar:
overflow-y : visible | auto | hidden | scroll
visible : Do not clip the content and do not add scroll bars.
auto : clip content and add scrollbars when necessary
Hidden: Do not display content that exceeds the height of the object. This property is not introduced here. If you like, you can try it yourself.
scroll : always show vertical scroll bar

First, let me tell you how to remove the scroll bar:
If you use the Baidu style template, there can only be one scroll bar, which is the largest browser window scroll bar on the right side of the entire space, which is the scroll bar I beautified. Now I tell you that we can remove this scroll bar, but it will not affect the browsing method:
In the body
Add overflow-y to {}:
visible, then the scroll bar will not be displayed. You may ask, how do you pull it down like this? Haha, since I said it doesn't affect browsing, then 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 browse the web, you use the scroll wheel to scroll down the web page more often than you directly drag the scroll bar with the mouse, right? As a reminder, if you encounter a friend who has no scroll bar and a mouse without a scroll wheel, how do you browse the web? Haha, you can use the PageUp and PageDown keys above the arrow keys on the keyboard
To turn the pages up and down, you can also use the space key to pull the web page down and Shift+space key to pull the web page up. Another way is to use the up and down arrow keys to pull. In addition, you can press the Home key to return to the top of the web page and the End key to reach the bottom of the web page. Haha, aren’t there a lot of ways? However, this will always be a little inconvenient, so you can consider whether to cancel the scroll bar based on your own space and preferences.

Haha, I didn't expect to talk so much at once.

Here's how to add a scroll bar:
overflow-y: auto; height: how many px
auto
It is to automatically determine whether to add a scroll bar. When the content of the set object exceeds the height set by height, a scroll bar is automatically added, otherwise it will not be displayed. The default value in body{} is
overflow-y: auto; height: browser height, so when the webpage 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 with different content and height. Some friends can't find the IDs of these templates, maybe there are only IDs such as #m_comment div.item{} or #m_pro a{}, then you can add the ID that doesn't exist, so you can set it.

Here is another method to add scrollbars:
overflow-y :scroll
The function of this parameter has been explained above. However, if you only add this parameter, although the scroll bar will be displayed, the scroll bar will not be displayed, so you must also add a
height: how many px
The height property is similar to the above method, but there is a fundamental difference. 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.

Next, let's talk about the beautification of the scroll bar. My friend showed me a description on the Internet. I think the picture above is very good, but it is very small, so I enlarged it by twice, and it looks much clearer. Let's first talk about the various properties of beautification:

Copy code

The code is as follows:

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 overwhelmed by seeing so many attributes? Haha, don't worry, you will feel much better if you take a look at the diagram I just mentioned which has been magnified twice:

There is also a scrollbar-base-color attribute in the picture here. In fact, this attribute is the sum of the above 7 attributes. How to say it? When you set the color of this attribute,
The first 7 properties do not need to be set, the scroll bar will automatically set them for you, but this setting will be automatically set based on the color of the scrollbar-base-color you set. The advantage of this property is that you don’t have to spend a lot of time studying the colors of each place, but the disadvantage is that it cannot blend all the colors into one. .

Note: If you set scrollbar-base-color, do not set the other seven properties. If you set the other seven properties, do not set scrollbar-base-color. Otherwise, there may be conflicts and some effects will not work.

Finally, considering that you may like my beautified code [so conceited~], I posted my beautified code:

Copy code

The code is as follows:

SCROLLBAR-FACE-COLOR: #CCFFFF;
SCROLLBAR-HIGHLIGHT-COLOR: white;
SCROLLBAR-SHADOW-COLOR: #813533;
SCROLLBAR-3DLIGHT-COLOR: #813533;
SCROLLBAR-ARROW-COLOR: #813533;
SCROLLBAR-TRACK-COLOR: white;
SCROLLBAR-DARKSHADOW-COLOR: #813533;

The above code is added to body{}

<<: Getting Started Tutorial for Beginners ⑨: How to Build a Portal Website

>>: Detailed explanation of VUE responsiveness principle