Detailed explanation of how to customize the style of CSS scroll bars
|
This article introduces the CSS scrollbar selector and shows in a demo how to customize a horizontal and a vertical scrollbar in Webkit browsers and IE browsers. 0. Demand Sometimes we don't want to use the browser's default scroll bar style because it is not customized and beautiful enough. So how do you customize the style of the scroll bar? Let’s take a look together below. 1 Basics 1.1 CSS scrollbar selector for Webkit core The ::-webkit-scrollbar CSS pseudo-class selector affects the style of an element's scrollbar. property: ::-webkit-scrollbar — The entire scrollbar ::-webkit-scrollbar-track — Scrollbar track ::-webkit-scrollbar-thumb — The thumb on the scrollbar ::-webkit-scrollbar-button — Buttons on the scrollbar (up and down arrows) ::-webkit-scrollbar-track-piece — The track part of the scrollbar without the slider ::-webkit-scrollbar-corner — The corner, where the vertical and horizontal scrollbars meet at the same time ::-webkit-resizer — Partial styles for the corner of some elements (e.g. draggable buttons of textarea) Notice: (1) Browser support: ::-webkit-scrollbar is only available in browsers that support Webkit (Chrome, Safari). (2) Vertical/horizontal scroll bars can be set You can set the scroll bar to be horizontal (:horizontal). If not specified, the default is vertical (:vertical). (3) Buttons on the scroll bar (:decrement, :increment) You can set the image, which will be shown in the demo below. 1.2 IE custom scroll bar style There are relatively few customizable styles, and you can only control the colors displayed on each part of the scroll bar, so the customization is low. Here I only list some styles. I tried styles such as scrollbar-3dlight-color and scrollbar-highlight-color but they didn’t work, so I won’t list them here: scrollbar-arrow-color — The color of the scrollbar triangle arrow scrollbar-face-color — The color of the scroll bar slider scrollbar-track-color — The color of the scrollbar track and button background scrollbar-shadow-color — The color of the slider border on the scroll box 2. Get started quickly with demo 2.1 Custom scroll bar styles for Webkit-based browsers (chrome, safari) If you think the above description is a bit abstract, you can open the demo directly in the browser and understand the meaning of each attribute by referring to the comments in the demo. I have marked some of the properties in the figure. The outer track properties of the scroll bar are not marked in the figure. You can open the Chrome browser console to view the properties:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scrollbar demo--lynnshen</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.scolltable {
width: 500px;
height: 300px;
border: 1px solid black;
/*Achieve horizontal and vertical centering*/
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -150px;
overflow: scroll;
}
.content {
/*It should be wider than .scolltable*/
width: 600px;
}
/*whole scroll bar*/
::-webkit-scrollbar {
width: 24px;
background-color: transparent;
}
/* Entire horizontal scroll bar */
::-webkit-scrollbar:horizontal {
height: 24px;
background-color: transparent;
}
/*Scrollbar track*/
::-webkit-scrollbar-track {
background-color: #f6f8fc;
border-right: 1px solid #f1f5fa;
border: 1px solid #f1f5fa;
;
}
/*Vertical slider*/
::-webkit-scrollbar-thumb {
background-color: rgba(220, 228, 243, 1);
border-radius: 0px;
border-top: 1px solid #edf2f9;
border-bottom: 1px solid #edf2f9;
border-left: 1px solid #f1f5fa;
}
/*Horizontal slider*/
::-webkit-scrollbar-thumb:horizontal {
/* background-color: rgba(220, 228, 243, 1); */
border-radius: 0px;
border-top: 1px solid #edf2f9;
/* border-right: 1px solid #f1f5fa;
border-left: 1px solid #f1f5fa; */
}
/*Button on the scroll bar--vertical scroll bar up*/
::-webkit-scrollbar-button:decrement {
border-bottom: 1px solid #edf2f9;
height: 26px;
background: url("./images/scroll_up.png") 7px 9px no-repeat;
border-right: 1px solid #f1f5fa;
border-left: 1px solid #f1f5fa;
}
/*Button on the scroll bar--vertical scroll bar down*/
::-webkit-scrollbar-button:increment {
border-top: 1px solid #edf2f9;
height: 26px;
background: url("./images/scroll_down.png") 7px 10px no-repeat;
border-right: 1px solid #f1f5fa;
border-left: 1px solid #f1f5fa;
border-bottom: 1px solid #f1f5fa;
}
/*Button on the scroll bar--horizontal scroll bar to the left*/
::-webkit-scrollbar-button:horizontal:decrement {
border-top: 1px solid #edf2f9;
width: 26px;
background: url("./images/scroll_left.png") 9px 7px no-repeat;
border-top: 1px solid #f1f5fa;
border-bottom: 1px solid #f1f5fa;
border-right:1px solid #f1f5fa;
}
/*Button on the scroll bar--horizontal scroll bar to the right*/
::-webkit-scrollbar-button:horizontal:increment {
border-top: 1px solid #edf2f9;
width: 25px;
background: url("./images/scroll_right.png") 10px 7px no-repeat;
border-left:1px solid #f1f5fa;
}
/*Corner*/
::-webkit-scrollbar-corner{
border:1px solid #dce4f3;
}
</style>
</head>
<body>
<div class="scolltable">
<div class="content">
: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
</div>
</body>
</html>Result:
WebKit-based browsers illustrate: (1) The images used by the buttons at both ends of the scroll bar, and four images used in each of the four corners; (2).scolltable achieves the effect of horizontal and vertical centering by using absolute alignment to position the element's fixed point at the center of the body. Then use a negative margin (half the element's width and height) to pull it back to the center of the body. 2.2 IE custom scroll bar style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scrollbar for IE--lynnshen</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.scolltable {
width: 500px;
height: 300px;
border: 1px solid black;
/*Achieve horizontal and vertical centering*/
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -150px;
overflow: scroll;
scrollbar-face-color:greenyellow;
scrollbar-arrow-color:goldenrod;
scrollbar-shadow-color:red;
scrollbar-track-color:pink;
}
.content {
/*It should be wider than .scolltable*/
width: 600px;
}
</style>
</head>
<body>
<div class="scolltable">
<div class="content">
: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
</div>
</body>
</html>Result:
IE 3. Summary This article mainly wants to record how to customize the scroll bar style in Webkit-based browsers and IE, and provides two demos respectively. If you have any questions, please feel free to point them out. The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
>>: MySQL online deadlock analysis practice
Recommend
Example of implementing text wrapping in html (mixed text and images in html)
1. Text around the image If we use the normal one...
MySQL 5.6.33 installation and configuration tutorial under Linux
This tutorial shares the installation and configu...
A brief discussion on how to set CSS position absolute relative to the parent element
As we all know, the CSS position absolute is set ...
Detailed tutorial on setting password for MySQL free installation version
Method 1: Use the SET PASSWORD command MySQL -u r...
Briefly describe the difference between MySQL and Oracle
1. Oracle is a large database while MySQL is a sm...
Detailed explanation of the problems and solutions encountered in flex multi-column layout
Flex layout is undoubtedly simple and easy to use...
Introduction to the use of html area image hotspots with a list of related properties
The <area> tag is mainly used in image maps...
The correct way to use Homebrew in Linux
Many people use Linux Homebrew. Here are three ti...
Example code for implementing fullpage.js full-screen scrolling effect with CSS
When I was studying CSS recently, I found that I ...
mysql 5.7.11 winx64.zip installation and configuration method graphic tutorial
Install and configure the MySql database system. ...
VMware15 installation of Deepin detailed tutorial (picture and text)
Preface When using the Deepin user interface, it ...
Detailed explanation of count(), group by, order by in MySQL
I recently encountered a problem when doing IM, a...
Solution to the problem of repeated triggering of functions in Vue project watch
Table of contents Problem description: Solution 1...
Using js to implement a number guessing game
Last week, the teacher gave me a small homework, ...
A complete tutorial on installing Ubuntu 20.04 using VMware virtual machine
Ubuntu is a relatively popular Linux desktop syst...