javascript - 自定义 Div 滚动条

Question

如何使用 html、css 或 javascript 设计滚动条？

我不想要的

我不想编辑浏览器的当前滚动条。

我想要什么

我想为我的公司网站制作自己的滚动条。

https://keenthemes.com/metronic/preview/?demo=demo4

“代码”

我什至不知道如何开始构建这个，但我会尽力而为!

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>

!重要

这只是我所知道的一个例子，如果这是你，你会专业地构建它。

请帮忙并提前致谢。

Answer 1

这是一个简单的示例，说明您可以使用 -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>

希望对您有所帮助。