手写滚动条设计—-直接粘贴

  • A+
所属分类:Web前端
摘要

 

<!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>