Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

CSS global scrollbar style compatible writing implementation

The SCSS code is as follows:

/* Scrollbar style S */
$--scrollbar-track-color: rgba(0.0.0.0.5);
$--scrollbar-thumb-color: transparent;

// for Mozilla
@-moz-document url-prefix() {
  * {
    scrollbar-color: $--scrollbar-track-color $--scrollbar-thumb-color ! important;
    scrollbar-width: thin ! important; }}// for IE
.ie {
  &, * {
    scrollbar-arrow-color: $--scrollbar-track-color; // The color of the triangle arrow
    scrollbar-face-color: $--scrollbar-track-color; // Color of the scroll bar slider button
    scrollbar-track-color: $--scrollbar-thumb-color; // Scroll bar track color
    scrollbar-shadow-color: transparent; // Scroll bar shadow
    // scrollbar-highlight-color: #0099dd; // The overall color of the scroll bar
    // scrollbar-3dlight-color:#0099dd; // The appearance color of the scrollbar 3D light shaded border
    // scrollbar-darkshadow-color: #0099dd; // The appearance color of the scrollbar 3d dark shadow border
    // scrollbar-base-color: #0099dd; // Base color of scroll bar}}// for Webkit
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: $--scrollbar-track-color;
  &:hover {
    background-color: lighten($--scrollbar-track-color.20%);
  }
}
::-webkit-scrollbar-track-piece {
  border-radius: 4px;
  background-color: $--scrollbar-thumb-color;
}
::-webkit-scrollbar-corner {
  background-color: $--scrollbar-thumb-color;
}
/* Scrollbar style E */
Copy the code

The IE kernel needs to add UA detection at the beginning of the page to complete the compatibility Hack with CSS.

The code is as follows:

import UA from "ua-device";

const ua = new UA(navigator.userAgent);

const classList = document.documentElement.className.split("");
// Add '. Ie 'class for Internet Explorer
if (ua.browser.name === "Internet Explorer") {
  classList.push("ie");
}
document.documentElement.className = classList.join("");

export default ua;
Copy the code

*: Because the width of the Mozila kernel scrollbar thin equals 8px, the width of the IE kernel scrollbar cannot be set, and the Edge browser scrollbar cannot be modified. Therefore, to ensure that all browsers have the same scrollbar style, other kernel browsers should have the same scrollbar style as possible.