滚动条是指允许用户滚动浏览网页内容的元素。它通常显示为页面侧面或底部的水平或垂直条。滚动条也称为“滚动条拇指”，它是当用户上下滚动时滚动条移动的部分。
在本文中，我们将讨论如何使用 CSS 更改滚动条的位置。我们将涵盖以下主题 –
为元素创建一个新类
定位滚动条和拇指
立即学习“前端免费学习笔记（深入）”；
使用“position”属性更改滚动条的位置
为元素创建一个新类
首先，我们需要在 CSS 中为要更改滚动条位置的元素创建一个新类。例如，如果我们想要更改具有“scrollablediv”类的 div 的滚动条位置，我们将在 CSS 中创建以下类 –
.scrollable-div { CSS Code…….}::-webkit-scrollbar { width: 5px; background-color: #F5F5F5;}
此类将以“scrollable-div”元素的滚动条为目标，并将宽度设置为 5 像素，背景颜色设置为浅灰色。
定位滚动条的拇指
在这一步中，我们的目标是滚动条的拇指。拇指是滚动条中当用户滚动时移动的部分。我们将通过将以下代码添加到 CSS 类来做到这一点 –
::-webkit-scrollbar-thumb { background-color: #000000;}
这会将拇指的颜色更改为黑色。
使用“position”属性更改滚动条的位置
在最后一步中，我们将使用“position”属性更改滚动条的位置。例如，如果我们想将滚动条定位在“scrollable-div”元素的左侧，我们将使用以下代码 –
.scrollable-div::-webkit-scrollbar { position: absolute; left: 0;}
这会将滚动条定位在“scrollable-div”元素的左侧。
示例
此示例将滚动条放在 div 元素的左侧。
The scroll bar on the left-hand side of the div element body{ text-align:center; } .scrollable-div{ height: 150px; width: 250px; overflow-y: auto; background-color:pink; margin:auto; padding:5px; transform: rotate(180deg); } .scrollable-div-inside { transform: rotate(-180deg); } .scrollable-div::-webkit-scrollbar { width: 5px; /* Set the width of the scrollbar */ background-color: #F5F5F5; /* Set the background color of the scrollbar */ position: absolute; right: 0; /* Position the scrollbar on the right of the element*/ } .scrollable-div::-webkit-scrollbar-thumb { background-color: #000000; /* Set the color of the thumb */ } ::-webkit-scrollbar-track { background: red; border-radius: 5px; }The scroll bar on the Left side of the div element
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
示例
此示例将滚动条放在 div 元素的右侧。
The scroll bar on the right-hand side of the div element body{ text-align:center; } .scrollable-div{ height: 150px; width: 250px; overflow-x: auto; background-color:pink; margin:auto; padding:5px; } .scrollable-div::-webkit-scrollbar { width: 5px; /* Set the width of the scrollbar */ background-color: #F5F5F5; /* Set the background color of the scrollbar */ position: absolute; left: 0; /* Position the scrollbar on the left of the element */ } .scrollable-div::-webkit-scrollbar-thumb { background-color: #000000; /* Set the color of the thumb */ } ::-webkit-scrollbar-track { background: red; border-radius: 5px; }The scroll bar on the right side of the div element
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
结论
使用 CSS 更改滚动条的位置是一个简单的过程，可以通过为元素创建一个新类、定位滚动条和滑块，然后使用“position”属性来更改滚动条的位置来完成。通过一点 CSS 知识和一些实验，我们可以为网站创建独特的自定义外观。
以上就是如何使用CSS改变滚动条的位置？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625348.html
微信扫一扫 
支付宝扫一扫 
