CSS 自定义滚动条在div中

在本文中，我们将介绍如何使用CSS来自定义div中的滚动条。

阅读更多：CSS 教程

什么是滚动条？

滚动条是用于在浏览器窗口或一个容器（例如div）中滚动内容的UI元素。滚动条有时会因为页面或容器内容超出显示范围而出现，让用户能够滚动查看剩余的内容。

默认滚动条样式

在大多数浏览器中，默认滚动条样式是统一的，不能被修改。然而，通过使用CSS，我们可以自定义滚动条样式以适应我们的需求。

下面是默认滚动条样式的示例：

div {
  overflow: auto;
  height: 200px;
}

上述代码中，我们设置了一个固定高度的div，并使用overflow: auto来显示滚动条。

自定义滚动条样式

为了自定义滚动条样式，我们可以使用CSS的::-webkit-scrollbar伪元素。这个伪元素可以帮助我们定制滚动条的外观。

下面是一个自定义滚动条样式的示例：

div::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

div::-webkit-scrollbar-thumb {
  background-color: #888;
}

div::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

上述代码中，我们使用::-webkit-scrollbar来选择滚动条元素，并定义了宽度和背景颜色。然后，使用::-webkit-scrollbar-thumb选择滚动条的滑块，并定义了滑块的背景颜色。最后，使用::-webkit-scrollbar-thumb:hover在滑块悬停时改变背景颜色。

示例

下面的示例演示了如何使用自定义滚动条样式来美化div中的滚动条：

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      overflow: auto;
      height: 200px;
    }

    div::-webkit-scrollbar {
      width: 10px;
      background-color: #f5f5f5;
    }

    div::-webkit-scrollbar-thumb {
      background-color: #888;
    }

    div::-webkit-scrollbar-thumb:hover {
      background-color: #555;
    }
  </style>
</head>
<body>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis fringilla hendrerit. Suspendisse blandit ipsum consequat ligula malesuada porta. Curabitur tincidunt dolor mauris, sed dictum mi consequat vitae. Integer ac porta nisl, in ultrices purus. Praesent ante purus, hendrerit vitae maximus nec, ultricies sit amet nunc. Nam sem nisl, accumsan in risus in, efficitur fermentum odio. Aenean lobortis felis sit amet tempor facilisis. Mauris a nulla mauris. Cras posuere libero ac interdum faucibus. Mauris interdum aliquet nunc vel lacinia. Suspendisse potenti. Donec vel blandit lorem.</p>
    <p>Curabitur non enim ex. Curabitur nec est sed nunc finibus semper ut finibus mauris. Sed volutpat tellus id dolor fermentum, at accumsan purus molestie. Sed aliquam sem metus, id varius mi rutrum ac. Aenean pharetra pulvinar mauris in mattis. Maecenas consequat arcu a leo eleifend, nec venenatis quam rutrum. Nunc in tellus auctor, aliquet sem sed, bibendum augue. In hac habitasse platea dictumst.</p>
    <p>Vestibulum vel finibus turpis, vel condimentum metus. Mauris dui lorem, fringilla sit amet porta eu, odio sagittis ex. Integer eleifend eleifend commodo. In hac habitasse platea dictumst. Suspendisse pellentesque lacus in metus vehicula dignissim. Nullam id tristique orci, in sagittis nibh. Nulla facilisi. In rutrum ex a metus pellentesque varius. Proin fringilla lacus vel vestibulum vehicula.</p>
    <p>Suspendisse dignissim finibus ipsum at placerat. Sed semper lobortis metus et semper. Nullam ornare malesuada lorem ac auctor. Sed condimentum turpis a malesuada accumsan. Praesent tristique, justo a faucibus ornare, purus sapien iaculis purus, a hendrerit leo est in odio. Vivamus ut ante eget lorem auctor efficitur. Sed dignissim mattis justo ac mattis. Aenean malesuada placerat lobortis. Morbi tristique, nulla vel luctus consequat, sem sem tincidunt dui, vel varius erat risus sed ex.</p>
    <p>Etiam faucibus feugiat ipsum, ut finibus urna bibendum sed. Nulla facilisi. Aliquam non mi sem. Aliquam iaculis auctor nibh non faucibus. Praesent nec fringilla enim. Maecenas odio tellus, fringilla non velit in, consectetur laoreet tortor. Morbi ut eros purus. Sed vulputate massa nec vestibulum consectetur. Etiam cursus pulvinar nisl eget iaculis. Donec malesuada orci diam, eget viverra nisl rhoncus eget. Sed fermentum, felis eu pretium lobortis, lacus orci lobortis elit, vel aliquam mauris turpis id nisi. Curabitur non mi eu sapien feugiat convallis sit amet id odio.</p>
    <p>Aenean sagittis ligula in purus blandit euismod. Donec molestie elit eget fermentum euismod. Fusce malesuada tellus id porta laoreet. Aenean nec ligula orci. Mauris malesuada dolor in vestibulum vulputate. Maecenas imperdiet venenatis orci, fermentum vestibulum arcu vulputate quis. Curabitur nec ligula nulla. Cras id felis in tellus efficitur lobortis quis et sapien. Pellentesque condimentum nulla id mi mattis molestie. Morbi nec purus at nisi pulvinar tincidunt et consequat ante.</p>
  </div>
</body>
</html>