css自定義滾動條樣式，自定義文字選擇樣式，設置文字不被選擇

時間 2019-11-18

原文原文鏈接

::-webkit-scrollbar 滾動條總體部分
::-webkit-scrollbar-thumb  滾動條裏面的小方塊，能向上向下移動（或往左往右移動，取決因而垂直滾動條仍是水平滾動條）
::-webkit-scrollbar-track  滾動條的軌道（裏面裝有Thumb）
::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，容許經過點擊微調小方塊的位置。
::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）
::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處
::-webkit-resizer 兩個滾動條的交匯處上用於經過拖動調整元素大小的小控件

直接上代碼，不講解。css

這些網上均可以查的到。html

我這裏分享的代碼，基本是我用獲得的，分享到這裏，方便之後複製粘貼。web

參考網址：https://css-tricks.com/custom-scrollbars-in-webkit/瀏覽器

效果圖：ide

html代碼：spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css自定義滾動條樣式，自定義文字選擇樣式，設置文字不被選擇</title>
    <style>
        /*清除全部滾動條樣式*/
        /*::-webkit-scrollbar {*/
            /*height: 0;*/
            /*width: 0;*/
            /*display: none;*/
            /*background-color: transparent;*/
        /*}*/


        /*::-webkit-scrollbar{width:12px;}*/
        /*::-webkit-scrollbar-track{background-color: rgba(255,70,78,0.2);-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);  } !*背景*!*/
        /*::-webkit-scrollbar-thumb{background-color:#ff464e;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);  border-radius: 6px;}  !*顏色*!*/
        /*::-webkit-scrollbar-thumb:hover {background-color:#9c3}  !*hover*!*/
        /*::-webkit-scrollbar-thumb:active {background-color:#00aff0} !*active*!*/



        /*
        *  背景顏色
        */
        body::-webkit-scrollbar{width:12px;height:12px;}
        /*body::-webkit-scrollbar-track{background-color: rgba(255,70,78,0.2);-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);  } !*背景*!*/
        /*body::-webkit-scrollbar-track-piece:start {background:red;}!*上半部分背景軌跡*!*/
        /*body::-webkit-scrollbar-track-piece:end {background:yellow;} !*下半部分背景軌跡*!*/


        body::-webkit-scrollbar-thumb{background-color:#ff464e;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.5);  border-radius: 6px;}  /*滾動條顏色*/
        body::-webkit-scrollbar-thumb:window-inactive {background: rgba(255,0,0,0.4);}   /*鼠標離開瀏覽器時的滾動條顏色*/
        body::-webkit-scrollbar-thumb:hover {background-color:#9c3}  /*hover*/
        body::-webkit-scrollbar-thumb:active {background-color:#00aff0} /*active*/


        /*
        * 按鈕
        */
        body::-webkit-scrollbar-button{background:red;}
        body::-webkit-scrollbar-button:hover{background-color:#9c3}
        body::-webkit-scrollbar-button:active{background-color:#00aff0}
        body::-webkit-scrollbar-button:vertical:start{  /*滾動條向上按鈕*/
            background:green;
            /*放一個向上的背景圖片*/
        }
        body::-webkit-scrollbar-button:vertical:end{   /*滾動條向下按鈕*/
            background:yellow;
            /*放一個向下的背景圖片*/
        }




        ::-moz-selection {background:#ff464e; color:#fff;}
        ::-webkit-selection {background:#ff464e; color:#fff;}
        ::selection {background:#ff464e; color:#fff;}

        .no-select p{
            -moz-user-select:none;
            -webkit-user-select:none;
            user-select:none;
        }
    </style>
</head>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p>15</p>
        <p>16</p>
        <p>17</p>
        <p>18</p>
        <p>19</p>
        <p>20</p>
    </div>
    <div class="no-select" style="height:300px;overflow: scroll;">
        <p>這裏不能被選擇</p>
        <p>ppp1</p>
        <p>ppp2</p>
        <p>ppp3</p>
        <p>ppp4</p>
        <p>ppp5</p>
        <p>ppp6</p>
        <p>ppp7</p>
        <p>ppp8</p>
        <p>ppp9</p>
        <p>ppp10</p>
    </div>
</body>
</html>