css实现自定义滚动条动画效果-html代码-BFW代码库

css实现自定义滚动条动画效果

代码语言：html

代码描述：css实现自定义滚动条动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  position: relative;
  padding: 0 2.5em 2em;
  line-height: 1.85;
  font-size: 2.55vmax;
  margin: 0 2em;
  background-color: #9E9E9E;
  color: rgba(0, 0, 0, 0.5);
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-style: italic;
}
body::-webkit-scrollbar {
  width: 1em;
  z-index: 100;
  background-color: #9E9E9E;
}
body::-webkit-scrollbar-thumb {
  background-color: rebeccapurple;
  box-shadow: 0 -100vh 0 100vh rebeccapurple;
}

h1 {
  line-height: 1.75;
  font-size: 1.725em;
}
</style>

</head>
<body translate="no">

<section class="lorem">
<h1>Pay attention to the purple scrollbar, convallis id aliquam ultricies look! ↠</h1>
<p>
Suspendisse nec nisi quam. Quisque laoreet vel elit et tristique. Quisque rutrum ultricies condimentum. Aenean leo leo, convallis id aliquam no.........完整代码请登录后点击上方下载按钮下载查看