自定义-webkit-scrollbar滚动条

最新推荐文章于 2024-04-14 00:48:11 发布

2301_76612093

最新推荐文章于 2024-04-14 00:48:11 发布

阅读量138

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/2301_76612093/article/details/133861573

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>scrollbar</title>
  <style>
    /* 整个滚动条 */
    ::-webkit-scrollbar {
      width: 17px;
      height: 17px;
    }

    /* 滚动条上的滚动滑块 */
    ::-webkit-scrollbar-thumb {
      border: 5px solid transparent;
      background-color: rgb(217, 217, 217);
      /* 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面 */
      background-clip: content-box;
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: rgb(200, 200, 200);
    }

    /* 滚动条轨道 */
    ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 1px 1px rgb(217, 217, 217);
      border: 1px solid transparent;
      background-color: rgb(255, 255, 255);
    }

    /* 滚动条上的按钮（上下箭头） */
    ::-webkit-scrollbar-button {
      display: none;
    }
  </style>
</head>
<body>
  <div style="width: 600px; height: 400px; overflow: auto;">
    <div style="width: 800px; height: 450px;">
      <p>浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。</p>
      <p>忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。东船西舫悄无言，唯见江心秋月白。</p>
      <p>沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。夜深忽梦少年事，梦啼妆泪红阑干。</p>
      <p>我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识！我从去年辞帝京，谪居卧病浔阳城。浔阳地僻无音乐，终岁不闻丝竹声。住近湓江地低湿，黄芦苦竹绕宅生。其间旦暮闻何物？杜鹃啼血猿哀鸣。春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛？呕哑嘲哳难为听。今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作《琵琶行》。感我此言良久立，却坐促弦弦转急。凄凄不似向前声，满座重闻皆掩泣。座中泣下谁最多？江州司马青衫湿。</p>
    </div>
  </div>
</body>
</html>

效果图：