About the problem of scroll bars/removing scroll bars in HTML_HTML/Xhtml_Web page production

1. The color problem of the scroll bar under xhtml

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

But the same code, Our application will not work under xhtml. I believe many good friends have encountered the same problem.

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


The only difference between this code and the previous paragraph is that in 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 look at the definitions of html and xhtml:

HTML (Hyper Text Markup Language, HyperText Markup Language), HyperText Markup Language is widely used on the Internet. HTML describes text How the benchmark 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 that 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 “*”:


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

(ps: In fact, it is not so much the difference between html and xhtml as 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 method is html4.01, but you need to change the XHTML 1.0 transitional doctype to HTML 4.01 doctype. It will not have any effect if you define the body on the same page, 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 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, Vertical scrolling adapts to content.
Advantages: Solve this problem visually. Vertical scrollbar is not forced to appear when not necessary.
Disadvantage: 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, vertical scrolling is adaptive according to the content.
Disadvantage: 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 show the vertical scroll bar:


Hide all


or


Here is the attribute code of the scroll bar:
overflow-y: visible | auto | hidden | scroll
visible: Does not cut the content or add a scroll bar.
auto: Cut content and add scroll bars when needed
hidden: Do not display content that exceeds the height of the object. This attribute will not be introduced here. If you like, you can try it yourself
scroll: Always display 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, which is the largest browser window scroll bar on the right side of the entire space, that is, It’s the scroll bar I’ve beautified. Now let me tell you, we can remove this scroll bar, but it will not affect the browsing method:
Add overflow-y to body
{}:
visible That's it, so the scroll bar won't 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. In addition, you can press the Home key to return to the top of the web page, and press 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 recommend it Set in the latest comments #m_comment{}, article list #m_blog{} and other templates whose content and height are not fixed. Some friends cannot find the IDs of these templates. They may only have, for example, #m_comment div.item{ } or #m_pro a{}, etc., then you can add the ID yourself, so that you can set it

Here is another method 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, the scroll bar will not be displayed, so you must add a
height: how many px
The height attribute is similar to the method above, 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

Let’s talk about it below Regarding the beautification of scroll bars, my friend showed me an explanation on the Internet. 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 talk about beautification first. Each attribute:


Are you nodding your head when you see so many attributes? Haha, don’t worry, you will feel much better if you take a look at the twice-enlarged diagram I just mentioned:

The picture here also has a scrollbar-base-color attribute. In fact, this attribute It is the sum of the above seven attributes. How do you say it? That is, after you set the color of this attribute,
you don’t need to set the previous 7 attributes. The scroll bar will automatically set it for you, but this setting will be based on the scrollbar-base- you 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 you may like my beautification code [it’s so stinky~], I posted my beautification code:



SCROLLBAR-FACE-COLOR: #CCFFFF;