如何为 WebKit 浏览器设置滚动条缩略图的样式?滚动条的组件有哪些?
滚动条是网页浏览的重要组成部分，它允许用户浏览长页面内容。基于 WebKit 的浏览器(例如 Safari 和 Google Chrome)提供了多种设置滚动条缩略图样式的方法，滚动条缩略图是可拖动的手柄，可在滚动条轨道上上下移动。
对于任何显示超出其边界内容的窗口来说，滚动条都是一项必不可少的功能。滚动条的加入为用户提供了一种在客户端区域内容中导航的方式。滚动条的方向决定了用户与其交互时滚动的方向。
顾名思义，水平滚动条允许用户水平滚动窗口内容，即向左或向右移动内容。另一方面，垂直滚动条允许用户垂直滚动内容，从而让他们能够上下导航。
在本文中，我们将学习如何为 Webkit 浏览器设计滚动条缩略图的样式，并探索滚动条的不同组件。
滚动条的组件
滚动条由几个部分组成，包括轨道、缩略图、箭头和按钮。滚动条由一个阴影轴(两端即顶部和底部)和一个箭头按钮以及箭头按钮之间的滚动框(有时称为缩略图)组成。
滚动条表示数据对象在用户窗口区域中的总长度或宽度，滚动框表示对象在客户端区域中可见的部分。
请注意，当用户滚动数据对象以显示其不同部分时，滚动框的位置会发生变化。另一方面，按钮用于跳转到上一页、下一页，或者跳转到内容的开头或结尾。
设置滚动条缩略图样式的方法
我们可以通过多种 CSS 方法设置滚动条缩略图的样式。让我们来讨论一下一些常用的样式设置方法。
方法 1:使用 Webkit 供应商前缀
在此方法中，我们使用 Webkit 供应商前缀。请注意，此方法仅与基于 Webkit 的浏览器(例如 Google Chrome、Edge 等)兼容，并且需要在样式表中添加以下 CSS 代码。语法如下。
语法
::-webkit-scrollbar-thumb {
background-color: green;
/* 滚动条拇指的其他 CSS 样式 */
}
示例
<html>
<head>
<title>Example to style the scrollbar thumb using Webkit Vendor Prefixes</title>
<style>
::-webkit-scrollbar-thumb {
background-color: green;
border-radius: 12px;
padding: 2px;
margin: none;
}
</style>
</head>
<body>
<h2>Example to style the scrollbar thumb using Webkit Vendor Prefixes</h2>
<p>
Tutorials Point was founded on the premise that there is a segment of readers who find online content more accessible and preferable when it comes to acquiring new skills at their own pace from the comfort of their homes. The journey began with the creation of a single tutorial on HTML in 2006. Encouraged by the positive response to the tutorial, we continued to expand our repository by adding new tutorials on a variety of subjects. Our current collection boasts a wealth of tutorials and articles on topics ranging from programming languages and web design to academics and much more.
</p>
</body>
</html>
方法二:使用 Webkit 滚动条伪元素
此方法中，我们使用 Webkit 滚动条伪元素。请注意，此方法仅兼容基于 Webkit 的浏览器，例如 Google Chrome、Edge 等，并且需要在样式表中添加以下 CSS 代码。语法如下。
语法
::-webkit-scrollbar {
width: 20px;
/* 滚动条拇指的其他 CSS 样式 */
}
::-webkit-scrollbar-thumb {
background-color: blue;
border-radius: 5px;
/* 滚动条拇指的其他 CSS 样式 */
}
示例
<html>
<head>
<title>Example to style the scrollbar thumb using Webkit Scrollbar Pseudo-elements</title>
<style>
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-thumb {
background-color: green;
border-radius: 12px;
}
</style>
</head>
<body>
<h2>Example to style the scrollbar thumb using Webkit Scrollbar Pseudo-elements</h2>
<p>
Tutorials Point was founded on the premise that there is a segment of readers who find online content more accessible and preferable when it comes to acquiring new skills at their own pace from the comfort of their homes. The journey began with the creation of a single tutorial on HTML in 2006. Encouraged by the positive response to the tutorial, we continued to expand our repository by adding new tutorials on a variety of subjects. Our current collection boasts a wealth of tutorials and articles on topics ranging from programming languages and web design to academics and much more.
</p>
</body>
</html>
方法三:使用 JavaScript 自定义滚动条样式
在此方法中，我们使用 JavaScript 设计并使用自定义滚动条。请注意，此方法兼容所有浏览器。请参阅以下语法，了解如何在网页中使用 JavaScript 代码。
语法
<style>
.scrollbar {
overflow: auto;
height: 250px;
width: 350px;
background-color: blue;
padding: 5px;
}
.thumb {
background-color: green;
height: 15px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
var scrollbar = document.querySelector('.scroll-thumb');
scroll-thumb.addEventListener('scroll', function() {
var mythumb = scrollbar.querySelector('.mythumb');
var mypercent = scrollbar.scrollTop / (scrollbar.scrollHeight - scrollbar.clientHeight);
var mythumbHeight = Math.floor(scrollbar.clientHeight * percent);
mythumb.style.height = mythumbHeight + 'px';
});
示例
<html>
<head>
<title>Example to style the scrollbar thumb using JavaScript</title>
<style>
.myscrollbar {
overflow: auto;
height: 200px;
width: 300px;
background-color: #eee;
padding: 10px;
}
.mythumb {
height: 20px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<h2>Example to style the scrollbar thumb using JavaScript</h1>
<div class="myscrollbar">
<div class="mythumb"></div>
<p>
Tutorials Point was founded on the premise that there is a segment of readers who find online content more accessible and preferable when it comes to acquiring new skills at their own pace from the comfort of their homes. The journey began with the creation of a single tutorial on HTML in 2006. Encouraged by the positive response to the tutorial, we continued to expand our repository by adding new tutorials on a variety of subjects. Our current collection boasts a wealth of tutorials and articles on topics ranging from programming languages and web design to academics and much more.
</p>
</div>
<script>
var myscrollbar = document.querySelector('.myscrollbar');
var mythumb = scrollbar.querySelector('.mythumb');
myscrollbar.addEventListener('scroll', function() {
var mythumbPosition = myscrollbar.scrollTop / (myscrollbar.scrollHeight - myscrollbar.clientHeight) * (myscrollbar.clientHeight - mythumb.clientHeight);
mythumb.style.top = mythumbPosition + 'px';
});
</script>
</body>
</html>
总结
在本文中，我们学习了如何为 WebKit 浏览器设置滚动条缩略图的样式，并了解了滚动条的不同组件。我们还学习了为 WebKit 浏览器设置滚动条缩略图样式的不同方法。第一种方法是使用 WebKit 供应商前缀直接设置滚动条缩略图的样式。第二种方法是使用 WebKit 滚动条伪元素来设置缩略图和其他滚动条组件的样式。第三种方法是使用 JavaScript 创建自定义滚动条并手动更新缩略图的位置。每种方法都有其优缺点，具体方法取决于项目的具体需求。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
