有趣且重要的css知识合集（4）浏览器各种样式的兼容

1、不同浏览器兼容滚动条

谷歌浏览器滚动条样式

.scroll-bar{
      &::-webkit-scrollbar {
      width: 3px;
      }
      &::-webkit-scrollbar-track {
      background-color:#62C4EE ;
      -webkit-border-radius: 2em;
      border-radius:2em;
      }
      &::-webkit-scrollbar-thumb {
      background-color:#5584ff;
      -webkit-border-radius: 2em;
      border-radius:2em;
      }
}

-webkit-scrollbar-track： 滚动条背景样式

-webkit-scrollbar-thumb： 滚动条样式 

火狐浏览器滚动条样式

.scroll-bar{
    & {
        scrollbar-width: thin;
        scrollbar-color: #5584ff #62C4EE;
      }
}

火狐的简单讲解一下，目前来看估计只能改这俩样式，宽度和颜色：

scrollbar-width: auto | thin | none （默认为auto，宽度比较大，thin要窄一点，none为不显示，但是依旧可滚动）

scrollbar-color：前者为滚动条样式，后者为滚动条背景样式

2、浏览器前缀知识

-webkit- （谷歌，Safari，新版Opera浏览器，所有基于WebKit 内核的浏览器）
-moz- （火狐浏览器）
-o- （旧版Opera浏览器）
-ms- （IE浏览器 和 Edge浏览器）

css前缀

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease; 

js api前缀

let requestAnimationFrame = window.requestAnimationFrame ||
                            window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame ||
                            window.oRequestAnimationFrame ||
                            window.msRequestAnimationFrame;

3、 鼠标滑轮事件兼容

chrome浏览器 滑轮事件是 mousewheel， 基本值： e.wheelDelta值是120和-120

firefox浏览器 滑轮事件是 DOMMouseScroll，基本值：e.detail值是-10和10

edge浏览器用的也是chrome内核，所以事件和chrome一致

所以在vue上最好的兼容写法是 @wheel.prevent， 里面基本值还是用的chrome的e.wheelDelta

 示例：

    <div
        @wheel.prevent="(e) => scaleDom(e)"
      >

    scaleDom(e) {
        // e.wheelDelta
    }

 4、input['Number'] 输入框计数器隐藏

示例图：

css兼容写法：

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button { // 兼容chrome
      -webkit-appearance: none !important;
      appearance: none;
    }
    input{ // 兼容firefox
      -moz-appearance: textfield;
    }

 

---持续更新---