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

Question

我正在尝试将滚动条的宽度设置为“thin”和“none”，它们都不起作用。我也尝试过使用-webkit- 注意：我已将溢出设置为“自动”，是否滚动条宽度属性不起作用？

以下是我的 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>

和 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;
        }
      }
    }
  }
}

有人能想出一个可能的解决方案吗？

Answer 1

scrollbar-width 对于浏览器来说太新了。参考：Can I use scrollbar-width?

仅适用于 webkit 浏览器（chrome、safari 和更新的 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

从下面的 URL，您可以看到“滚动条宽度”在浏览器中非常不受欢迎，因此这可能是它不起作用的原因 =>

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

你可以像使用 WebKit 一样

1. 你有一个具有滚动功能的元素。

2. 在同一个滚动元素上设置“::-webkit-scrollbar” =>

   .scroll-element::-webkit-scrollbar { 宽度：4px； 高度：100%； 背景颜色：灰色； }

请记住，此“背景颜色：灰色”用于滚动条背景，而不用于实际滚动条。

1. 让实际的滚动条（移动部分）变成不同的颜色，现在使用 "::webkit-scrollbar-thumb" =>

   .scroll-element::-webkit-scrollbar-thumb { 背景：#000； }