css自定义滚动条样式，自定义文字选择样式，设置文字不被选择

::-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;*/
            /* 0;*/
            /*display: none;*/
            /*background-color: transparent;*/
        /*}*/


        /*::-webkit-scrollbar{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