CSS scroll bar implementation steps and beautification tips

May 04, 2021 CSS

2. CSS Hidden Scroll Bar (Landscape, Solid)

4. Adjust the color matching of the scroll bar with CSS

Many friends in the web design to customize the scroll bar style scenario, scroll bar style we can control through css, such as NetEase mailbox scroll bar looks good, is the use of CSS to set the implementation. B ut how should css-controlled scroll bars be implemented and hidden? C an the scroll bar change color or look better? H ere's a pass to tell you.

Before you begin this section, you can review the contents of the CSS overflow property.

1, overflow-y set how to manage content when the content of an object exceeds its specified height, overflow-x how to manage content when the content of an object exceeds its specified width.

Parameters:
visible Expand the area to display everything

auto Add scroll bars only if the content exceeds the limit

hidden Always hides the scroll bar

scroll Always displays a scroll bar

2, height the height of the scroll bar (modify the values after that).

3, scroll bar color parameters:

scrollbar-3d-light-color or retrieves the color of the scroll bar's bright border

scrollbar-highlight-color sets or retrieves the Bright Edge color of the scroll bar's 3D interface

scrollbar-face-color sets or retrieves the color of the scroll bar 3D surface

scrollbar-arrow-color the color of the scroll bar direction arrow

scrollbar-shadow-color sets or retrieves the dark side color of the scroll bar's 3D interface

scrollbar-dark-shadow-color sets or retrieves the color of the scroll bar Dark Shadow

scrollbar-base-color or retrieves the scroll bar reference color

Style the scroll bar

In the original html, we can define the scroll bar of the entire page in this way
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 right -
scrollbar-darkshadow-color:#D7DCE0; / -Right-one -/
scrollbar-base-color:#D7DCE0; / -base color -
scrollbar-track-color:
}

But with the same code, our application doesn't work under xhtml, and I'm sure a lot of friends have had the same problem
So how do I apply a scroll bar style under xhtml? L ook at the following code
html{
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 right -
scrollbar-darkshadow-color:#D7DCE0; / -Right-one -/
scrollbar-base-color:#D7DCE0; / -base color -
scrollbar-track-color:
}

The only difference between this code and the last paragraph is that on the elements defined by CSS, one is body and one is html. L et's test it again, modify the "body" of the html page to "html" and find that it still works. S o why on earth?

Literally, xhtml is one more x than html, so this x is actually xml, why add an xml in it? T he fundamental reason is to make html more structured and standardized (because html is so bad). W hat we define in html is body, because html is not very standard so this works, and in xhtml it doesn't work, and I look at that diagram obviously, the body label itself is not the root element, only html is the root element, and the scroll bar of the page belongs to the root element, so that's why we define body without effect, because we define just a subgene. o k, we know the principle, to do an experiment if you change the definition of "body" or "xhtml"

*{
scrollbar-3dlight-color:#D4D0C8;
scrollbar-highlight-color:#fff;
scrollbar-face-color:#E4E4E4;
scrollbar-arrow-color:#666;
scrollbar-shadow-color:#808080;
scrollbar-darkshadow-color:#D7DCE0;
scrollbar-base-color:#D7DCE0;
scrollbar-track-color:#;
}

Both html and xhtml pass, because the label on the definition page of course also includes the "html" tag.

(ps: It's not so much the difference between html and xhtml as the difference between XHTML 1.0 transitional doctype, but if you get rid of the page's XHTML 1.0 transitional doctype, then there's no doctype on this page, the default display is html 4.01, but if you want to remove the page XHTML 1.0 D octype modified to HTML 4.01 doctype the same page definition body will not work, although the standard for this page is html 4.01)

CSS Hidden Scroll Bar (Landscape, Solid)

Online all say that


      overflow-y:hidden

can hide scroll bars, but only for div elements, can not hide the


      style="overflow-x:hidden"

and some information said that the addition of scrolls in the


      scroll="no"

can hide


      style="overflow-y:hidden"

the scroll bar;

1, completely hidden

Add scroll scroll="no" hide the scroll bar;

2. Hide when you don't need it

Means that when the width or height of the browser window is greater than the width or height of the page, the scroll bar is not displayed; On the other hand, it is displayed;

3, style sheet method

Add style to style="overflow-x:hidden" hide the horizontal scroll bar;

Add style="overflow-y:hidden" to hide the vertical scroll bar.

body{ overflow-x:hidden; Not under standard DTD

html { overflow: scroll; }

Force the scroll bar to be hidden: html s overflow: hidden; }
Hide IE's horizontal scroll bar:html s overflow-x: hidden; }
Hide IE's vertical scroll bar:html s overflow-y: hidden; }
Force the display of IE's horizontal scroll bar: html s overflow-x: scroll; }
Force the display of IE's vertical scroll bar: html s overflow-y: scroll; }
Force the display of Mozilla's horizontal scroll bar: html s overflow:-moz-scrollbars-horizontal; }
Note: Only the horizontal scroll bar is forced to be displayed. That is, even if you need to display a vertical scroll bar, the vertical scroll bar will not appear.
Force the display of Mozilla's vertical scroll bar: html :-moz-scrollbars-vertical; }
Note: Only the vertical scroll bar is enforced. That is, even if you need to display a horizontal scroll bar, the horizontal scroll bar will not appear.

The final solution:

Add on the page:

<style>

HTML {Overflow-x: hidden; // Hidden horizontal scroll bar overflow-y: hidden; // Hide vertical roll bar}

</style>

How CSS beautifys scroll bars

Support for CSS scroll bars from various browsers:

Webkit browsers here include Google Chrome, Apple's Safari, and the latest Opera browser. T ogether, these browsers account for more than half of the desktop browser market share. F or mobile browsers, it's basically Google Chrome and Safari. T he only regret is that Firefox has not made any improvements to the CSS scroll bar properties so far. A s for Internet Explorer, let's look forward to it.

Given the current browser market landscape, we are confident that the CSS scroll bar beautification feature will have a very good and bright future.

Google Chrome has been supporting CSS beautification of scroll bars for many years. T hese webkit browser-specific CSS properties require a -webkit-browser engine prefix, and we'll only use some basic CSS scroll bar properties here, adding some necessary explanations to the code.

::-webkit-scrollbar {

width: 15px;

} / * This is for the default style (must) * /

When a pseudo-element style appears in CSS, the Webkit engine shuts down its default scroll bar style output, using only the style information provided in the CSS.

Here are some other pseudo-element styles:

::-webkit-scrollbar-track {

background-color: #b46868;

} / * Slolboard slide background color * /

::-webkit-scrollbar-thumb {

background-color: rgba(0, 0, 0, 0.2);

} / * Slider color * /

::-webkit-scrollbar-button {

background-color: #7c2929;

} / * Slide line two-head listening button color * /

::-webkit-scrollbar-corner {

background-color: black;

} / * The horizontal scroll bar and the longitudinal scroll bar intersect the colors of the sharp corners * /

With these CSS properties, you'll see the following effect (again: you'll need to use a webkit browser, such as Google Chrome, to see it).

CSS scroll bar implementation steps and beautification tips

Google Chrome users are the happiest. B ut we can't give up on Firefox and Internet Explorer users. F or these browsers, a very effective remedy is to use the javascript plug-in. M any people on the web recommend a jQuery plug-in developed by Kelvin Luck: jScrollPane. B ut some people commented that the plug-in is "PITA", I turned over the dictionary, found that "PITA Chinese meaning "egg pain." A fter trying it out, it really hurts. I t is not recommended. I found another plug-in, malihu-custom-scrollbar-plugin, which feels pretty good, and its usage is:

if (!$.browser.webkit) {

$.mCustomScrollbar.defaults.scrollButtons.enable=true; //enable scrolling buttons by default

$.mCustomScrollbar.defaults.axis="yx"; //enable 2 axis scrollbars by default

$(".container").mCustomScrollbar({theme:"dark"});

}

</script>

Screenshot of the effect in Firefox:

Many websites already use CSS beautification techniques for these scroll bars, especially some of Google's apps and sites, such as Gmail and Google Plus. I believe that soon Firefox and Internet Explorer will also provide their own solutions.

Adjust the color matching of the scroll bar with CSS

The IE browser can color the scroll bar by adjusting the way CSS is done.

The code is as follows:

.uicss-cn

{

height:580px;overflow-y: scroll;

scrollbar-face-color:#EAEAEA;

scrollbar-shadow-color:#EAEAEA;

scrollbar-highlight-color:#EAEAEA;

scrollbar-3dlight-color:#EAEAEA;

scrollbar-darkshadow-color:#697074;

scrollbar-track-color:#F7F7F7;

scrollbar-arrow-color:#666666;

}

The scroll bar area corresponding to the specific style is shown in the figure:

CSS scroll bar implementation steps and beautification tips

Table of contents

Style the scroll bar

CSS Hidden Scroll Bar (Landscape, Solid)

How CSS beautifys scroll bars

Adjust the color matching of the scroll bar with CSS

Cookie Consent