如何使用CSS创建自定义滚动条？

  • Z时代
  • 2024-01-10
  • 分类：综合

要使用CSS创建自定义滚动条，代码如下-

示例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      height: 200vh; /*to create a scrollbar*/
   }
   ::-webkit-scrollbar {
      width: 20px;
   }
   p {
      font-size: 40px;
   }
   ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px grey;
      border-radius: 10px;
   }
   ::-webkit-scrollbar-thumb {
      background: rgb(75, 22, 161);
      border-radius: 2px;
   }
   ::-webkit-scrollbar-thumb:hover {
      background: #9156ff;
   }
</style>
</head>
<body>
<h1>Custom Scrollbar Example</h1>
<h2>Will not work in IE,Edge and Firefox</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, rerum. Placeat molestias 
quisquam doloremque, perferendis aspernatur quod cupiditate cumque porro cum facilis vel 
dolorem fuga dolore quae deserunt sint inventore distinctio et, modi sunt! Commodi omnis 
adipisci autem enim, perferendis, modi possimus quos, ducimus error hic natus voluptate. 
Error, rem!
</p>
</body>
</html

以上是 如何使用CSS创建自定义滚动条？ 的全部内容， 来源链接： utcz.com/z/357170.html

回到顶部