Home > Developer > Web Develop
Before we start building ourselves, we feel we should first record the next concept: browser kernel.
I have mentioned compatibility issues many times, and I often encounter compatibility problems. The root cause of these problems lies in it: the browser kernel. This is a popular saying. In fact, it should be described as a professional: Rendering Engine, which is responsible for interpreting the webpage syntax and Rendering its content and format (that is, display, I feel a lot of professional when I use a word.) different browser kernels have different interpretations of the webpage syntax, resulting in a so-called "compatibility problem ".
We will not talk about compatibility here, but it is better to understand the reasons and some solutions. The best solution is to write different codes for different kernels, of course, for specific Writing of specific modules, we will first introduce the types of browser kernels:
* Trident kernel (IE kernel)
* Gecko kernel (Firefox kernel)
* Webkit kernel (Safari kernel, chrome kernel, open source)
* Blink kernel (latest Google kernel)
* Presto kernel (pre-Opera kernel)
At present, we are most commonly used in the first three types. Therefore, if we write these three types of kernels at the current stage, we can only observe the effect of the browser.
Let's get down to the truth and start to build our own exclusive scroll bar. Of course, we can consider different browsers for testing:
In fact, if it is the biggest change to a scroll bar, it is a: hidden, from having to having, out of nothing, almost qualitative change, we have to mention it here.
<span style="font-size:12px;">overflow:hidden;</span>Of course, if it is an ie kernel browser, <body scroll = "no"> is equally valid,
On the macro level, we have mastered the nuances. Next we will start to explore the details of ie kernel browsers:
<Span style = "font-size: 12px;"> scrollbar-arrow-color: red;/* color of the triangle arrow */scrollbar-face-color: white; /* color of the three-dimensional scroll bar (including the background color of the arrow part) */scrollbar-3dlight-color: color;/* color of the bright side of the three-dimensional scroll bar */scrollbar-highlight-color: red; /* highlighted color of the scroll bar (color of the left side) */scrollbar-shadow-color: red;/* color of the shadow of the scroll bar */scrollbar-darkshadow-color: blue; /* color of the Shadow outside the three-dimensional scroll bar */scrollbar-track-color: yellow;/* color of the background of the three-dimensional scroll bar */</span>So let's see what the scroll bar looks like.
It's just some changes in color, which is a little disappointing, but you know how long it has been, from ie5.5 to now, we can give up the old age for the beauty of today, but we have to respect the amazing thing we once had.
Next, let's write the scroll bar settings under webkit.
<Span style = "font-size: 12px;"> body:-webkit-scrollbar {// background-color: yellow; width: 100px;} body: :-webkit-scrollbar-button {// the buttons at both ends of the scroll bar. You can set background-color: red;} body :: -webkit-scrollbar-track {// outer orbital background-color: blue;} body:-webkit-scrollbar-track-piece {// inner orbital, that is, the rolling background-color: green;} body:-webkit-scrollbar-thumb {// drag part of the background-color: orange; border-radius: 10px ;} </span>What effect will we get?
There are wood, wood, and my happy golden hoop. If I add a picture to the upper and lower to replace the monotonous color, isn't it amazing? Of course, I am ugly, crazy, at least it actually changed ....
There are a lot of pseudo elements that can be used to implement this function. js and jquery can also implement this function, but I will not talk about it here. Let me steal music .....
Ha, a little sleepy. Good night.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
