This is the 15th day of my participation in Gwen Challenge

Hi, I’m Daotin, front end team leader. If you want to get more front end highlights, follow me and unlock new front end growth poses.

The following text:

Problem description

The default browser scrollbar style is ugly, and the scrollbar style varies from browser to browser. For aesthetics and uniformity, the scrollbar style must be changed.

Why don’t you write your own scroll bar?

First, self-written scrollbars are not as efficient and compatible as the browser’s default scrollbars.

Second, it’s too much trouble to write it yourself. Why not use the default one

Problem analysis

If you want to change the default scrollbar style, you need to know what properties of the scrollbar style can be changed, and which parts of the scrollbar do these properties correspond to?

Here’s a picture of the relationship:

Attribute Description:

::-webkit-scrollbar // The whole part of the scrollbar ::-webkit-scrollbar-button // The buttons at both ends of the scrollbar ::-webkit-scrollbar-track // the outer track ::-webkit-scrollbar-track-piece :-webkit-scrollbar-thumb // The one inside the scrollbar that can be dragged ::-webkit-scrollbar-corner // The corner ::-webkit-resizer // Define the drag block style in the bottom right cornerCopy the code

The solution

So for Chrome, we can change the scrollbar style like this:

/* Define the height, width and background of the entire scroll bar: the height and width correspond to the dimensions of the horizontal and vertical scroll bars */
::-webkit-scrollbar
{
    width:10px;
    background-color:#F5F5F5;
}
/* Define the scroll bar track: inner shadow + rounded */
::-webkit-scrollbar-track
{
    background-color:#F5F5F5;
}
/* Define slider: inner shadow + rounded corner */
::-webkit-scrollbar-thumb
{
    border-radius:10px;
    background-color:# 555;
}

Copy the code

Generally we can set the main properties as follows, but if you want more detailed CSS properties, there are also:

: Horizontal // Horizontal scroll bars: Vertical // Vertical scroll bars: Decrement // applies to buttons and inner track pieces. It is used to indicate whether the button or inner track will reduce the position of the window (for example, above the vertical scroll bar, to the left of the horizontal scroll bar). : Increment // Decrement is similar, used to indicate whether buttons or inner tracks increase the viewport's position (for example, below a vertical scroll bar and to the right of a horizontal scroll bar). :start // Pseudo classes are also applied to buttons and sliders. It is used to define whether the object is placed in front of the slider. :end // Similar to the start pseudo-class, identifies whether the object is placed after the slider. :double-button // This pseudo-class is used for buttons and inner rails. Used to determine if a button is one of a pair of buttons on the same end of the scrollbar. For the inner track, it indicates whether the inner track is adjacent to a pair of buttons. :single-button // similar to the double-button pseudo-class. In the case of buttons, it is used to determine whether a button is independently within a section of the scroll bar. For the inner track, it indicates whether the inner track is close to a single-button. :no-button // For the inner track, indicating whether the inner track should scroll to the end of the scrollbar, for example, when there are no buttons at both ends of the scrollbar. :corner-present // Used for all scroll bar tracks, indicating whether the rounded corners of the scroll bar are displayed. :window-inactive // Used for all scroll bar tracks, indicating whether a page container (element) to which the scroll bar is applied is currently active. (In recent versions of WebKit, this pseudo-class can also be used for :: Selection pseudo-elements. The WebKit team has plans to extend it and promote it as a standard pseudo class)Copy the code

Usage:

::-webkit-scrollbar-track-piece:start {}
::-webkit-scrollbar-thumb:window-inactive {}
::-webkit-scrollbar-button:horizontal:decrement:hover {}

Copy the code

compatibility

IE

For IE, currently only found to modify the scrollbar properties of the color, not found to modify the style of the place.

The specific colors can be modified as follows:

Here’s a chart to make it clear:

Code:

.ie-div {
   scrollbar-arrow-color: #f4ae21; /* Triangle arrow color */   
   scrollbar-face-color: # 333; /* The color of the stereo scroll bar */   
   scrollbar-3dlight-color: # 666; /* The color of the bright edge of the stereo scroll bar */   
   scrollbar-highlight-color: # 666; /* The color of the blank part of the scroll bar */   
   scrollbar-shadow-color: # 999; /* The color of the stereo scroll bar shadow */   
   scrollbar-darkshadow-color: # 666; /* Solid scroll bar strong shadow color */   
   scrollbar-track-color: # 666; /* Stereo scroll bar background color */   
   scrollbar-base-color:#f8f8f8; /* The base color of the scroll bar */ 
}

Copy the code

The modified IE scroll bar style is as follows:

Firefox

Firefox 64-bit currently offers only a few custom scrollbar features:

  • scrollbar-widthThe value of this attribute can be:
scrollbar-width: auto; // The default is scrollbar-width: thin; // Narrower than the default scrollbar-width: none; // No scroll bar is displayed, but you can still scrollCopy the code

Here is what thin looks like (figure 1 default, Figure 2 THIN) :

  • scrollbar-color: The value can be:
scrollbar-color: auto; // The default is scrollbar-color: dark;
scrollbar-color: light;
scrollbar-color: red green; // First scroll wheel color, second scroll bar background colorCopy the code

Dark and light are not implemented.

Sample code:

#style-0 {
    scrollbar-width: thin;
    scrollbar-color: #ccc #eee;
}

Copy the code

Use plug-ins or do it yourself

Useful plugins:

  • JQuery Custom Scrollbar

  • Perfect Scrollbar: only 6K in size.

other

I see a more interesting operation is to put a div layer on the interface, and then dig a hole in the area of the scroll bar, and only show a part of the scroll bar, and then show a part of the scroll bar is similar to custom style.

conclusion

If you just change the style, IE can’t help, but Firefox can help.

My compromise is to make Chrome the same style as Firefox.

Code:

/** Description: Custom browser scrollbar style. Example: If my-div needs to use custom scroll bars, write as follows. .my-div { overflow: auto; @import '.. /.. /commons/css/custom_scroll.less'; } Note: the element needs to use the 'overflow:hidden' attribute. Compatibility: Compatible with Chrome and Firefox, not IE */


&::-webkit-scrollbar {
  width: 6px;
  background-color: #eee;
}

&::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;

  &:hover {
    background-color: #a8a8a8;
  }

  &:active {
    background-color: # 787878;
  }
}

& {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #eee;
}

Copy the code

So Chrome and Firefox look the same.

Refer to the link

  • Segmentfault.com/a/119000001…

Questions and Communication

How do you unify scrollbar styles in your front-end projects? Welcome to leave a message to communicate with me!

Recent hot articles:

  • Waterfall flow, it’s so easy
  • Four common ajax cross-domain solutions (easy to understand)
  • Vue. Js Naming Style Guide (Easy to remember Version)

Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin