数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会科学
时尚研究
法律研究如何使用 CSS 创建响应式自定义滚动条？
要创建一个自定义滚动条，我们将使用以下 伪元素使用 CSS 创建响应式自定义滚动条 −
:-webkit-scrollbar
创建自定义滚动条
首先，设置滚动条的宽度 −
::-webkit-scrollbar {
width: 12px;
}
设置滚动条的颜色 −
::-webkit-scrollbar-thumb {
background: skyblue;
}
设置滚动条的悬停颜色 −
::-webkit-scrollbar-thumb:hover {
background: blue;
}
实例
我们现在来看一下创建响应式自定义滚动条的完整实例 −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: gray;
}
::-webkit-scrollbar-thumb {
background: skyblue;
}
::-webkit-scrollbar-thumb:hover {
background: blue;
}
</style>
</head>
<body>
<h2>Display Custom Scrollbar</h2>
<p>Check the custom styles scrollbar which changes its color on Hover.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue tortor, congue sit amet mi sit amet, interdum euismod urna. Aenean consequat eget odio eget elementum. Nam pellentesque scelerisque interdum. Sed placerat malesuada justo nec tristique. Donec nec nisi suscipit, finibus nibh a, lacinia sem. Cras eleifend risus nulla, eget commodo metus condimentum sit amet. Nulla facilisis ipsum id bibendum congue. Vestibulum aliquam rhoncus elit, pharetra mollis arcu dictum a. Integer vestibulum egestas nibh a consectetur. Duis nec facilisis elit. Quisque ut lorem a nulla ullamcorper laoreet non at sem. Ut maximus enim eu orci blandit feugiat. Donec in tristique risus. Morbi feugiat accumsan ipsum. Nulla facilisi.</p>
<p>Nam sagittis vitae velit a vulputate. Vivamus est lectus, laoreet vel volutpat quis, ultrices non dui. Nullam bibendum felis eget est dapibus congue. Etiam non fringilla tortor. Phasellus velit tortor, tristique quis convallis vitae, scelerisque vel mi. Aenean commodo lorem sed augue feugiat finibus. Suspendisse sit amet euismod ex, in posuere quam. Integer tellus felis, gravida at pharetra iaculis, luctus non turpis. In congue, leo a tristique pellentesque, sem est cursus mi, vel faucibus massa nunc ac velit. In hac habitasse platea dictumst. Pellentesque nec ultrices est. Nunc id finibus dui.</p>
<p>Maecenas fringilla auctor odio, sed suscipit est iaculis et. Pellentesque sed consectetur urna. Proin quis volutpat metus. Nunc fringilla ipsum massa, non sollicitudin ante interdum et. In non viverra ligula. Praesent placerat feugiat auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vel ullamcorper ipsum, id vestibulum tortor.</p>
<p>Integer cursus blandit massa, eu varius ligula pellentesque non. Vestibulum mattis lacus eu sem gravida, ut posuere ante tempor. Mauris tincidunt fringilla neque id consectetur. Phasellus rutrum dui ut lectus egestas, id sollicitudin neque cursus. Morbi sed orci nulla. Aenean varius scelerisque lacinia. Integer vel vehicula quam. Curabitur enim orci, maximus quis sodales nec, congue quis augue. Quisque quis imperdiet leo. Proin suscipit, felis ac tempus luctus, eros nunc fermentum erat, at accumsan sem est ac nisl. Nunc nec orci volutpat, efficitur erat id, dictum leo. Integer id nunc iaculis, molestie orci ac, tincidunt tellus.</p>
<p>Donec quis arcu at ante elementum sagittis at in tortor. Integer condimentum et nibh a porta. Quisque ligula eros, mattis vel leo tempor, ultricies accumsan nisl. Vestibulum id sodales massa, eget venenatis justo. Duis a orci tristique, tincidunt erat et, sodales est. Etiam pellentesque nunc turpis, eu aliquet ex aliquam id. Duis id ex posuere, sodales purus et, accumsan orci. Pellentesque at erat nisl. Integer luctus a quam viverra maximus. Maecenas eu tempus quam.</p>
<p>Pellentesque fermentum eleifend felis, in rutrum nunc molestie ut. Pellentesque in efficitur ex, eget tincidunt enim. Sed in est sem. Aenean vel neque ut urna feugiat aliquet vitae in ante. Pellentesque sem tellus, vestibulum non nunc eu, convallis maximus nibh. Nullam eget vestibulum est. Curabitur volutpat ornare lorem, eget blandit urna porta in. Etiam facilisis lacinia leo nec sagittis. Aliquam at felis fringilla, porta felis euismod, tincidunt tellus. Maecenas ex erat, scelerisque sed hendrerit id, dignissim in neque. Nulla sit amet ex et tellus gravida tempus quis non nulla. Sed eu est fermentum, scelerisque justo quis, rutrum lorem. In molestie, ex id varius ornare, justo erat vehicula neque, cursus vestibulum ipsum massa in ligula. Cras tortor tellus, mattis eu massa in, suscipit finibus sapien. Sed dapibus porta felis, ut fermentum est lobortis non.</p>
<p>Pellentesque nec mollis ligula. Curabitur id dolor maximus orci ultricies pretium. Aenean eget augue quis mauris pharetra vestibulum sit amet vitae massa. Cras lacinia lacus ut arcu fringilla, eget sollicitudin dui maximus. Nam hendrerit tincidunt turpis, sit amet malesuada velit fringilla eget. Mauris egestas lacus eget lacus vulputate, a pretium velit accumsan. Donec vel libero quis sapien tempus consequat lacinia eu metus. Pellentesque ut vulputate enim. Maecenas sit amet porttitor massa.</p>
<p>Donec vitae lectus sed massa viverra ullamcorper. Ut quis pretium magna. Quisque posuere enim vitae dui pellentesque, eget auctor ipsum blandit. Pellentesque bibendum bibendum aliquet. Donec egestas tincidunt eros, in condimentum arcu viverra et. Integer et nulla magna. Etiam nec felis sit amet arcu dignissim facilisis semper quis mauris. Praesent ligula turpis, suscipit non massa sed, semper imperdiet neque.</p>
</body>
</html>
输出
上面，滚动条显示为天蓝色。
现在，使用滚动条并到达页面末尾。颜色现在将变成蓝色 −
更新于：2022-12-05
402 次查看
广告