# スクロールバーの変更方法

**URL:** https://meta.discourse.org/t/how-to-change-scrollbars/116037
**Category:** UX
**Created:** [2019 年 4 月 26 日午前 6:49 UTC](https://meta.discourse.org/t/how-to-change-scrollbars/116037 "2019-04-26T06:49:02Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![nexo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nexo/32/106384_2.png) [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [2019 年 4 月 26 日午前 6:49 UTC](https://meta.discourse.org/t/how-to-change-scrollbars/116037/1 "2019-04-26T06:49:02Z")

</div>

Hi, would you know why certain scrollable elements have this custom scroll-bar (tag selector):

> **[Gyazo Screen Video](https://gyazo.com/83a0b354035af5427b9431146a3001f7)**
>
> Gyazo is the easiest way to record screenshots & videos you can share instantly. Save time with async visual communication that's effortless and engaging.

And why other elements have the default browser/OS scroll-bar (post preview, banners, etc.) :

 ![image](https://global.discourse-cdn.com/meta/original/3X/d/a/daed06fbdc3cd61ee3570a9d8d99ae61250c6a4b.png)  
 ![image](https://global.discourse-cdn.com/meta/original/3X/2/e/2ea74be1e3c5950256ce11694dfbe279082bb4ff.png)

Is there a way to make all scroll-bars appear as the one that tag selectors have?

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2019 年 4 月 26 日午前 7:58 UTC](https://meta.discourse.org/t/how-to-change-scrollbars/116037/2 "2019-04-26T07:58:24Z")

</div>

That is a question for @j.jaffeux

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [2019 年 4 月 26 日午前 8:40 UTC](https://meta.discourse.org/t/how-to-change-scrollbars/116037/3 "2019-04-26T08:40:11Z")

</div>

This is what I used for this:

```plaintext
    &::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 10px;
    }

    &::-webkit-scrollbar-thumb {
      cursor: pointer;
      border-radius: 5px;
      background: dark-light-choose($primary-medium, $secondary-medium);
    }

    &::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 0;
    }

```

You can learn more about all of this here: [::-webkit-scrollbar CSS pseudo-element - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar)

Honestly I’m not a super huge fan of this and still made it for various reasons but I don’t recommend it, as stated in the MDN article this is not standard and not going to become standard.

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [2019 年 4 月 27 日午後 4:00 UTC](https://meta.discourse.org/t/how-to-change-scrollbars/116037/4 "2019-04-27T16:00:05Z")

</div>

This topic was automatically closed after 31 hours. New replies are no longer allowed.