Summary of HTML page scroll bar related settings

Scroll bars are often seen on web pages, such as input boxes, so how to set good-looking scroll bars according to your own preferences. Today I will summarize the method of setting scroll bars:

Setting scroll bars Style:

1.Illustration of the steps for setting the scroll bar style in css

The browser's default scroll bar looks too silly, so you have to do it yourself. I remember that IE browser has several styles for setting scroll bars, but they are relatively useless. They can only set colors and the like, and webkit does not support them. I accidentally saw that the scroll bar of NetEase mailbox looks very good. At first, I thought it was simulated with p. But when I saw it, it was exactly what I wanted. It was set up by using CSS and it was a webkit browser.

2.Set the scroll bar style in html

Set the scroll bar color:

1.Solution to the inability to set the scroll bar color under IE6

Solution to the inability to set the scroll bar color under IE6

Generally, the following CSS code is used when setting the scroll bar style:

body
{
    scrollbar-face-color:#f6f6f6;
    scrollbar-highlight-color:#fff;
    scrollbar-shadow-color:#eeeeee;
    scrollbar-3dlight-color:#eeeeee;
    scrollbar-arrow-color:#000;
    scrollbar-track-color:#fff;
    scrollbar-darkshadow-color:#fff;
}

Relevant Q&A recommendations:

1. Setting scroll bars with multiple divs nested in a div has no effect

2. How to set the top and bottom margins of the scroll bar

3.How to set the color of the scroll bar, cross-browser

The above is the detailed content of Summary of HTML page scroll bar related settings. For more information, please follow other related articles on the PHP Chinese website!