属性滚动条宽度在css中不起作用

Question

I'm trying to set the width of the scrollbar to 'thin' and 'none', neither of them are working. I have also tried using -webkit- NOTE: I'VE SET THE OVERFLOW TO 'AUTO', IS IT THAT THE SCROLLBAR-WIDTH PROPERTY IS NOT WORKING?

The following is my HTML:

<div class="chat__chatting">
        <div class="chat__scrollable-chat">
          <div class="chat__chatting__header">
            <div class="chat__chatting__header--img">
              <img src="../../assets/person.png" />
            </div>
            <div class="chat__chatting__header--descr">
              <div class="chat__chatting__header--name">Alexender</div>
              <div class="chat__chatting__header--location">Birmingham, United Kingdom</div>
              <div class="chat__chatting__header--age">Age 24</div>
            </div>
          </div>
          <div class="chat__chatting__body">
            <div class="chat__chatting__body--rcv-msg">
              <div class="chat__chatting__body--rcv-msg--img">
                <img src="../../assets/person.png" />
              </div>
              <div class="chat__chatting__body--rcv-msg---text">How are you?</div>
            </div>
            <div class="chat__chatting__body--sent-msg">
              <div class="chat__chatting__body--sent-msg--img">
                <img src="../../assets/person.png" />
              </div>
              <div class="chat__chatting__body--sent-msg---text">I'm fine</div>
            </div>
          </div>
        </div>
        <div class="chat__chatting__footer">
          <textarea rows="1" class="chat__chatting__footer--textfield"></textarea>
          <div class="chat__chatting__footer--send-btn">
            <img src="../../assets/send.svg" />
          </div>
        </div>
      </div>

And SCSS:

.chat{
&__scrollable-chat {
    overflow-y: auto;
    flex-grow: 1;
    scrollbar-width: none;
  }
  &__chatting {
    border-radius: 4px;
    flex: 3;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-flow: column;
    flex-grow: 3;
    &__header {
      display: flex;
      flex-direction: row;
      justify-content: center;
      padding: 2rem 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      &--img {
        width: 11rem;
        height: 11rem;
        overflow: hidden;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 1.5rem;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      &--descr {
        padding-top: 1rem;
      }
      &--name {
        font-size: 2.2rem;
        color: $color-text;
        padding-bottom: 0.6rem;
      }
      &--location,
      &--age {
        color: rgb(163, 163, 163);
        font-size: 1.5rem;
        display: block;
      }
    }

    &__footer {
      background-color: #f9f9f9;
      display: flex;
      flex-direction: row;
      padding: 1rem 3rem;
      position: sticky;
      left: 0;
      bottom: 0;
      align-items: stretch;
      &--textfield {
        border: 1px solid rgba(0, 0, 0, 0.1);
        resize: none;
        font-size: 1.7rem;
        font-family: "Lato", sans-serif;
        padding: 7px 1.4rem;
        color: $color-text;
        outline: none;
        width: 100%;
        scrollbar-width: none;
        border-radius: 15px;
        max-width: 100%;
        margin-right: 1.2rem;
      }
      &--send-btn {
        width: 4rem;
        height: 4rem;
        img {
          height: 100%;
          width: 100%;
          object-fit: fit;
        }
      }
    }
  }
}

Can someone please come up with a possible solution.

Answer 1

The scrollbar-width is too new for browser. Ref: Can I use scrollbar-width?

For other solution only for webkit browser (chrome, safari, and newer edge)

 ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); } ::-webkit-scrollbar-thumb { background-color: darkgrey; outline: 1px solid slategrey; }

 <textarea>ABCDE<br>ABCDE<br>ABCDE<br>ABCDE<br>ABCDE<br>ABCDE</textarea>

Answer 2

From the URL below, you can see the "scrollbar-width" is quite unpopular among browsers so that might be the reason why it's not working =>

https://caniuse.com/?search=scrollbar-width

You can use WebKit like

1. You have an element with scroll functionality.

2. set "::-webkit-scrollbar" on the same scroll element =>

   .scroll-element::-webkit-scrollbar { width: 4px; height: 100%; background-color: gray; }

Keep in mind that this "background-color: gray" is for the scrollbar background and NOT for the actual scroller.

3. Let's make the actual scroller (the moving part) a different color, now use the "::webkit-scrollbar-thumb" =>

   .scroll-element::-webkit-scrollbar-thumb { background: #000; }