sed 分享 play gpo radi https cal hid 右移

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

直接上代碼,不講解。

這些網上都可以查的到。

我這裏分享的代碼,基本是我用得到的,分享到這裏,方便以後復制粘貼。

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

效果圖:

技術分享圖片

html代碼:

技術分享圖片
<!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>
View Code

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