自定义 Div 滚动条
Custom Div Scrollbar
如何使用 html、css 或 javascript 使设计成为滚动条？
我不想要的
我不想为我的浏览器编辑当前的滚动条。
我想要什么
我想为我公司的网站制作自己的滚动条。
https://keenthemes.com/metronic/preview/?demo=demo4
"Code"
我什至不知道如何开始构建它，但我会尽力而为！
Html
.Stack_main-section {
height: 40rem;
border: .1rem solid lightgray;
/* flex display so the content is full height */
display: flex;
}
.Stack_content {
padding: .7remabove
}
.Stack_bar-track {
background: lightgray;
padding: .4rem;
}
.Stack_bar {
height: .4rem;
width: .7rem;
height: 9rem;
border-radius: .8rem;
background: gray;
}
<section class="Stack_main-section">
<div class="Stack_content ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac turpis at massa consectetur malesuada vel eu lorem. Vivamus ac eros id ex hendrerit rutrum eget et turpis. Nunc mollis diam id purus porttitor eleifend a interdum neque. Quisque et molestie
enim, eu dignissim nunc. Suspendisse varius mauris eu aliquet rutrum. Maecenas convallis tincidunt tellus, nec tincidunt tellus venenatis at. Quisque eget lacinia magna, ac placerat justo. Donec cursus elementum massa, id posuere lacus posuere eget.
Nunc at dui sodales, varius erat vel, varius lorem. Pellentesque cursus iaculis felis, auctor ultrices ligula elementum vel. Maecenas est dui, ullamcorper ut semper vel, tincidunt sit amet tellus. Nunc ornare ornare sapien in condimentum. Morbi porttitor
feugiat ligula, sit amet feugiat tellus maximus eget. Sed lobortis semper urna, in accumsan ipsum. Aenean dictum dui non dui vehicula porta. Vivamus pellentesque ligula eu egestas facilisis. Pellentesque vitae turpis consectetur lorem laoreet auctor.
Nunc ultrices pellentesque mi, nec lobortis neque facilisis id. Quisque pharetra vitae nibh eu venenatis. Cras pretium convallis cursus. Phasellus quis ex nisi. Nulla et laoreet eros, ac laoreet ante. Maecenas ornare risus a pellentesque varius. Sed
tristique tellus quam, sed volutpat ex sodales quis. Phasellus congue velit a nisl consequat, at tincidunt mi gravida. Morbi sit amet magna a sapien varius accumsan. Phasellus scelerisque, urna faucibus placerat venenatis, dui est fermentum massa,
non lacinia arcu sem in orci. Ut elementum massa et turpis aliquam varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut elementum augue. Sed pulvinar eleifend cursus. Donec id mi odio. Ut nec nibh malesuada, aliquet velit nec,
tincidunt mauris. Mauris sagittis placerat enim, at faucibus turpis vestibulum vel. Pellentesque at venenatis mauris, lacinia blandit dolor. Integer massa sem, elementum a nulla quis, rutrum euismod felis. Cras a lacinia urna. Nulla scelerisque venenatis
lectus ut ullamcorper. Curabitur eu suscipit metus. Praesent velit elit, luctus a facilisis nec, tempus non diam. Fusce nec aliquam est. Maecenas odio odio, pulvinar vel volutpat et, ullamcorper a ligula. Fusce bibendum lacus in est ultrices, vitae
mattis mauris sodales. Curabitur massa nisl, placerat a nunc a, scelerisque rhoncus dui. Vestibulum nibh dui, dictum et porta vel, hendrerit et augue. Morbi viverra est vel sapien venenatis faucibus. Nullam iaculis congue quam. Vestibulum dignissim
iaculis nulla, congue tincidunt nisi iaculis vitae. Fusce mollis aliquam ante, a sagittis dolor mattis id. Morbi aliquam sem nunc, at dictum sem aliquam ac. Suspendisse molestie justo leo, at venenatis mauris aliquam eu. Nunc id tortor malesuada diam
consectetur dapibus sit amet a lorem. Pellentesque dictum et libero vitae semper. Donec sit amet ipsum vel nulla eleifend fringilla ac at velit. Donec consectetur aliquam metus. Integer eget ex et velit imperdiet pulvinar. Duis nisi ante, finibus
eu posuere id, sodales vel sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui ex, placerat eu felis a, luctus ultricies nibh. Nam malesuada viverra facilisis. Nam rhoncus elit velit, at ullamcorper nisi viverra scelerisque. Pellentesque
et lacus non dolor fermentum fermentum. Morbi in vulputate nunc, sit amet malesuada massa. Nullam euismod dui id egestas scelerisque. Donec vel ex ut justo mollis varius. Quisque at tortor nec est cursus iaculis. Vivamus gravida purus a ligula elementum
dictum. Mauris diam dolor, convallis quis imperdiet et, maximus quis leo. Morbi aliquam pretium lectus ac hendrerit.t
</div>
<div class="Stack_bar-track">
<div class="Stack_bar">
.
</div>
</div>
</section>
!重要
这只是我想知道的一个例子，如果这是你，你会专业地构建它。
请提前帮助并谢谢你。
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer
这些是您正在寻找的元素。 CSS-Tricks 列出了一些优秀的示例，您在这里尝试实现的目标不是很具体，但是如果您阐明了您想要的样式类型，我很乐意稍微编辑一下我的答案容纳！
这里还有一个 CodePen，其中包含一些非常干净的选项，因此您可以比较并查看 styoes 的反应。
希望对您有所帮助！
对于不使用 webkit 作为渲染引擎的浏览器，您只需添加它的替代方案。
或者干脆使用插件。我发现这个 megathread 包含您可能需要的有关该主题的所有信息。
这是一个简单的示例，说明您可以使用 -webkit-scrollbar
做什么
.Stack_main-section {
height: 40rem;
border: .1rem solid lightgray;
/* flex display so the content is full height */
display: flex;
}
.Stack_content {
padding: .7remabove
}
.Stack_bar-track {
background: lightgray;
padding: .4rem;
}
.Stack_bar {
height: .4rem;
width: .7rem;
height: 9rem;
border-radius: .8rem;
background: gray;
}
/* Scrollbar */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track-piece {
background-color: #ddd;
}
*::-webkit-scrollbar-thumb {
background-color: #aaa;
border-radius: 6px;
border-style: none;
}
<section class="Stack_main-section">
<div class="Stack_content ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac turpis at massa consectetur malesuada vel eu lorem. Vivamus ac eros id ex hendrerit rutrum eget et turpis. Nunc mollis diam id purus porttitor eleifend a interdum neque. Quisque et molestie
enim, eu dignissim nunc. Suspendisse varius mauris eu aliquet rutrum. Maecenas convallis tincidunt tellus, nec tincidunt tellus venenatis at. Quisque eget lacinia magna, ac placerat justo. Donec cursus elementum massa, id posuere lacus posuere eget.
Nunc at dui sodales, varius erat vel, varius lorem. Pellentesque cursus iaculis felis, auctor ultrices ligula elementum vel. Maecenas est dui, ullamcorper ut semper vel, tincidunt sit amet tellus. Nunc ornare ornare sapien in condimentum. Morbi porttitor
feugiat ligula, sit amet feugiat tellus maximus eget. Sed lobortis semper urna, in accumsan ipsum. Aenean dictum dui non dui vehicula porta. Vivamus pellentesque ligula eu egestas facilisis. Pellentesque vitae turpis consectetur lorem laoreet auctor.
Nunc ultrices pellentesque mi, nec lobortis neque facilisis id. Quisque pharetra vitae nibh eu venenatis. Cras pretium convallis cursus. Phasellus quis ex nisi. Nulla et laoreet eros, ac laoreet ante. Maecenas ornare risus a pellentesque varius. Sed
tristique tellus quam, sed volutpat ex sodales quis. Phasellus congue velit a nisl consequat, at tincidunt mi gravida. Morbi sit amet magna a sapien varius accumsan. Phasellus scelerisque, urna faucibus placerat venenatis, dui est fermentum massa,
non lacinia arcu sem in orci. Ut elementum massa et turpis aliquam varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut elementum augue. Sed pulvinar eleifend cursus. Donec id mi odio. Ut nec nibh malesuada, aliquet velit nec,
tincidunt mauris. Mauris sagittis placerat enim, at faucibus turpis vestibulum vel. Pellentesque at venenatis mauris, lacinia blandit dolor. Integer massa sem, elementum a nulla quis, rutrum euismod felis. Cras a lacinia urna. Nulla scelerisque venenatis
lectus ut ullamcorper. Curabitur eu suscipit metus. Praesent velit elit, luctus a facilisis nec, tempus non diam. Fusce nec aliquam est. Maecenas odio odio, pulvinar vel volutpat et, ullamcorper a ligula. Fusce bibendum lacus in est ultrices, vitae
mattis mauris sodales. Curabitur massa nisl, placerat a nunc a, scelerisque rhoncus dui. Vestibulum nibh dui, dictum et porta vel, hendrerit et augue. Morbi viverra est vel sapien venenatis faucibus. Nullam iaculis congue quam. Vestibulum dignissim
iaculis nulla, congue tincidunt nisi iaculis vitae. Fusce mollis aliquam ante, a sagittis dolor mattis id. Morbi aliquam sem nunc, at dictum sem aliquam ac. Suspendisse molestie justo leo, at venenatis mauris aliquam eu. Nunc id tortor malesuada diam
consectetur dapibus sit amet a lorem. Pellentesque dictum et libero vitae semper. Donec sit amet ipsum vel nulla eleifend fringilla ac at velit. Donec consectetur aliquam metus. Integer eget ex et velit imperdiet pulvinar. Duis nisi ante, finibus
eu posuere id, sodales vel sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui ex, placerat eu felis a, luctus ultricies nibh. Nam malesuada viverra facilisis. Nam rhoncus elit velit, at ullamcorper nisi viverra scelerisque. Pellentesque
et lacus non dolor fermentum fermentum. Morbi in vulputate nunc, sit amet malesuada massa. Nullam euismod dui id egestas scelerisque. Donec vel ex ut justo mollis varius. Quisque at tortor nec est cursus iaculis. Vivamus gravida purus a ligula elementum
dictum. Mauris diam dolor, convallis quis imperdiet et, maximus quis leo. Morbi aliquam pretium lectus ac hendrerit.t
</div>
<!--div class="Stack_bar-track">
<div class="Stack_bar">
.
</div>
</div-->
</section>
希望对您有所帮助。
如何使用 html、css 或 javascript 使设计成为滚动条？
我不想要的
我不想为我的浏览器编辑当前的滚动条。
我想要什么
我想为我公司的网站制作自己的滚动条。
"Code"
我什至不知道如何开始构建它，但我会尽力而为！
Html
.Stack_main-section {
height: 40rem;
border: .1rem solid lightgray;
/* flex display so the content is full height */
display: flex;
}
.Stack_content {
padding: .7remabove
}
.Stack_bar-track {
background: lightgray;
padding: .4rem;
}
.Stack_bar {
height: .4rem;
width: .7rem;
height: 9rem;
border-radius: .8rem;
background: gray;
}
<section class="Stack_main-section">
<div class="Stack_content ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac turpis at massa consectetur malesuada vel eu lorem. Vivamus ac eros id ex hendrerit rutrum eget et turpis. Nunc mollis diam id purus porttitor eleifend a interdum neque. Quisque et molestie
enim, eu dignissim nunc. Suspendisse varius mauris eu aliquet rutrum. Maecenas convallis tincidunt tellus, nec tincidunt tellus venenatis at. Quisque eget lacinia magna, ac placerat justo. Donec cursus elementum massa, id posuere lacus posuere eget.
Nunc at dui sodales, varius erat vel, varius lorem. Pellentesque cursus iaculis felis, auctor ultrices ligula elementum vel. Maecenas est dui, ullamcorper ut semper vel, tincidunt sit amet tellus. Nunc ornare ornare sapien in condimentum. Morbi porttitor
feugiat ligula, sit amet feugiat tellus maximus eget. Sed lobortis semper urna, in accumsan ipsum. Aenean dictum dui non dui vehicula porta. Vivamus pellentesque ligula eu egestas facilisis. Pellentesque vitae turpis consectetur lorem laoreet auctor.
Nunc ultrices pellentesque mi, nec lobortis neque facilisis id. Quisque pharetra vitae nibh eu venenatis. Cras pretium convallis cursus. Phasellus quis ex nisi. Nulla et laoreet eros, ac laoreet ante. Maecenas ornare risus a pellentesque varius. Sed
tristique tellus quam, sed volutpat ex sodales quis. Phasellus congue velit a nisl consequat, at tincidunt mi gravida. Morbi sit amet magna a sapien varius accumsan. Phasellus scelerisque, urna faucibus placerat venenatis, dui est fermentum massa,
non lacinia arcu sem in orci. Ut elementum massa et turpis aliquam varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut elementum augue. Sed pulvinar eleifend cursus. Donec id mi odio. Ut nec nibh malesuada, aliquet velit nec,
tincidunt mauris. Mauris sagittis placerat enim, at faucibus turpis vestibulum vel. Pellentesque at venenatis mauris, lacinia blandit dolor. Integer massa sem, elementum a nulla quis, rutrum euismod felis. Cras a lacinia urna. Nulla scelerisque venenatis
lectus ut ullamcorper. Curabitur eu suscipit metus. Praesent velit elit, luctus a facilisis nec, tempus non diam. Fusce nec aliquam est. Maecenas odio odio, pulvinar vel volutpat et, ullamcorper a ligula. Fusce bibendum lacus in est ultrices, vitae
mattis mauris sodales. Curabitur massa nisl, placerat a nunc a, scelerisque rhoncus dui. Vestibulum nibh dui, dictum et porta vel, hendrerit et augue. Morbi viverra est vel sapien venenatis faucibus. Nullam iaculis congue quam. Vestibulum dignissim
iaculis nulla, congue tincidunt nisi iaculis vitae. Fusce mollis aliquam ante, a sagittis dolor mattis id. Morbi aliquam sem nunc, at dictum sem aliquam ac. Suspendisse molestie justo leo, at venenatis mauris aliquam eu. Nunc id tortor malesuada diam
consectetur dapibus sit amet a lorem. Pellentesque dictum et libero vitae semper. Donec sit amet ipsum vel nulla eleifend fringilla ac at velit. Donec consectetur aliquam metus. Integer eget ex et velit imperdiet pulvinar. Duis nisi ante, finibus
eu posuere id, sodales vel sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui ex, placerat eu felis a, luctus ultricies nibh. Nam malesuada viverra facilisis. Nam rhoncus elit velit, at ullamcorper nisi viverra scelerisque. Pellentesque
et lacus non dolor fermentum fermentum. Morbi in vulputate nunc, sit amet malesuada massa. Nullam euismod dui id egestas scelerisque. Donec vel ex ut justo mollis varius. Quisque at tortor nec est cursus iaculis. Vivamus gravida purus a ligula elementum
dictum. Mauris diam dolor, convallis quis imperdiet et, maximus quis leo. Morbi aliquam pretium lectus ac hendrerit.t
</div>
<div class="Stack_bar-track">
<div class="Stack_bar">
.
</div>
</div>
</section>
!重要
这只是我想知道的一个例子，如果这是你，你会专业地构建它。
请提前帮助并谢谢你。
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer
这些是您正在寻找的元素。 CSS-Tricks 列出了一些优秀的示例，您在这里尝试实现的目标不是很具体，但是如果您阐明了您想要的样式类型，我很乐意稍微编辑一下我的答案容纳！
这里还有一个 CodePen，其中包含一些非常干净的选项，因此您可以比较并查看 styoes 的反应。
希望对您有所帮助！
对于不使用 webkit 作为渲染引擎的浏览器，您只需添加它的替代方案。
或者干脆使用插件。我发现这个 megathread 包含您可能需要的有关该主题的所有信息。
这是一个简单的示例，说明您可以使用 -webkit-scrollbar
.Stack_main-section {
height: 40rem;
border: .1rem solid lightgray;
/* flex display so the content is full height */
display: flex;
}
.Stack_content {
padding: .7remabove
}
.Stack_bar-track {
background: lightgray;
padding: .4rem;
}
.Stack_bar {
height: .4rem;
width: .7rem;
height: 9rem;
border-radius: .8rem;
background: gray;
}
/* Scrollbar */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track-piece {
background-color: #ddd;
}
*::-webkit-scrollbar-thumb {
background-color: #aaa;
border-radius: 6px;
border-style: none;
}
<section class="Stack_main-section">
<div class="Stack_content ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac turpis at massa consectetur malesuada vel eu lorem. Vivamus ac eros id ex hendrerit rutrum eget et turpis. Nunc mollis diam id purus porttitor eleifend a interdum neque. Quisque et molestie
enim, eu dignissim nunc. Suspendisse varius mauris eu aliquet rutrum. Maecenas convallis tincidunt tellus, nec tincidunt tellus venenatis at. Quisque eget lacinia magna, ac placerat justo. Donec cursus elementum massa, id posuere lacus posuere eget.
Nunc at dui sodales, varius erat vel, varius lorem. Pellentesque cursus iaculis felis, auctor ultrices ligula elementum vel. Maecenas est dui, ullamcorper ut semper vel, tincidunt sit amet tellus. Nunc ornare ornare sapien in condimentum. Morbi porttitor
feugiat ligula, sit amet feugiat tellus maximus eget. Sed lobortis semper urna, in accumsan ipsum. Aenean dictum dui non dui vehicula porta. Vivamus pellentesque ligula eu egestas facilisis. Pellentesque vitae turpis consectetur lorem laoreet auctor.
Nunc ultrices pellentesque mi, nec lobortis neque facilisis id. Quisque pharetra vitae nibh eu venenatis. Cras pretium convallis cursus. Phasellus quis ex nisi. Nulla et laoreet eros, ac laoreet ante. Maecenas ornare risus a pellentesque varius. Sed
tristique tellus quam, sed volutpat ex sodales quis. Phasellus congue velit a nisl consequat, at tincidunt mi gravida. Morbi sit amet magna a sapien varius accumsan. Phasellus scelerisque, urna faucibus placerat venenatis, dui est fermentum massa,
non lacinia arcu sem in orci. Ut elementum massa et turpis aliquam varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut elementum augue. Sed pulvinar eleifend cursus. Donec id mi odio. Ut nec nibh malesuada, aliquet velit nec,
tincidunt mauris. Mauris sagittis placerat enim, at faucibus turpis vestibulum vel. Pellentesque at venenatis mauris, lacinia blandit dolor. Integer massa sem, elementum a nulla quis, rutrum euismod felis. Cras a lacinia urna. Nulla scelerisque venenatis
lectus ut ullamcorper. Curabitur eu suscipit metus. Praesent velit elit, luctus a facilisis nec, tempus non diam. Fusce nec aliquam est. Maecenas odio odio, pulvinar vel volutpat et, ullamcorper a ligula. Fusce bibendum lacus in est ultrices, vitae
mattis mauris sodales. Curabitur massa nisl, placerat a nunc a, scelerisque rhoncus dui. Vestibulum nibh dui, dictum et porta vel, hendrerit et augue. Morbi viverra est vel sapien venenatis faucibus. Nullam iaculis congue quam. Vestibulum dignissim
iaculis nulla, congue tincidunt nisi iaculis vitae. Fusce mollis aliquam ante, a sagittis dolor mattis id. Morbi aliquam sem nunc, at dictum sem aliquam ac. Suspendisse molestie justo leo, at venenatis mauris aliquam eu. Nunc id tortor malesuada diam
consectetur dapibus sit amet a lorem. Pellentesque dictum et libero vitae semper. Donec sit amet ipsum vel nulla eleifend fringilla ac at velit. Donec consectetur aliquam metus. Integer eget ex et velit imperdiet pulvinar. Duis nisi ante, finibus
eu posuere id, sodales vel sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui ex, placerat eu felis a, luctus ultricies nibh. Nam malesuada viverra facilisis. Nam rhoncus elit velit, at ullamcorper nisi viverra scelerisque. Pellentesque
et lacus non dolor fermentum fermentum. Morbi in vulputate nunc, sit amet malesuada massa. Nullam euismod dui id egestas scelerisque. Donec vel ex ut justo mollis varius. Quisque at tortor nec est cursus iaculis. Vivamus gravida purus a ligula elementum
dictum. Mauris diam dolor, convallis quis imperdiet et, maximus quis leo. Morbi aliquam pretium lectus ac hendrerit.t
</div>
<!--div class="Stack_bar-track">
<div class="Stack_bar">
.
</div>
</div-->
</section>
希望对您有所帮助。