手寫滾動條設計----直接粘貼-有解無憂

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .test {
                width: 300px;
                height: 200px;
                overflow: auto;
                float: left;
                border: none;
                border: 1px solid gray;
            }
            
            .scrollbar {
                width: 30px;
                height: 0px;
                margin: 0 auto;

            }

            .test-1::-webkit-scrollbar {
                /*滾動條整體樣式*/
                width: 3px;
                /*高寬分別對應橫豎滾動條的尺寸*/
                height: 30px;
            }

            .test-1::-webkit-scrollbar-thumb {
                /*滾動條里面小方塊*/
                border-radius: 10px;
                background-color: red;
                height: 50px;
                /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
                /* background: #535353; */
            }

            .test-1::-webkit-scrollbar-track {
                /*滾動條里面軌道*/
                /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
                border-radius: 10px;
                background: #EDEDED;
            }
        </style>
    </head>
    <body>
        
        
        <div class="test test-1">
            <p>該論文稱，預計2005-2010年時長江白鱘已滅絕，1月2日晚，楚天都市報記者聯系到危起偉，危起偉介紹，2019年9月中旬，國際組織IUCN（世界自然保護聯盟）在上海組織了專家組評估，評估結果為，中國特有物種、國家一級重點保護動物長江白鱘滅絕（extinct），

危起偉和張輝都參加了那次評估會，“大家尊重IUCN的評估模型和專家，但這一結果讓人心情沉重，”危起偉說，這一結果正在上報IUCN辦公室，隨后將在IUCN紅色名錄（《世界自然保護聯盟瀕危物種紅色名錄》）中正式更新和公布，

“千斤臘子，萬斤象，”“臘子”指的是中華鱘，“象”指的是長江白鱘，據說它可以長到上萬斤，白鱘體型碩大，成魚可長達七八米，游速迅疾，被稱為“水中老虎”“中國淡水魚之王”，它也是世界十種最大的淡水魚之一，它和長江中華鱘一樣，是距今已有一億五千萬年的中生代白堊紀殘存下來的極少數古代魚類之一，</p>
            <div class="scrollbar"></div>
        </div>
    </body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/76814.html
標籤：Html/Css
上一篇：WEB前端—CSS網頁布局（標準流，浮動流）
下一篇：BFC