屬性滾動條寬度在css中不起作用

Question

我正在嘗試將滾動條的寬度設置為“薄”和“無”，它們都不起作用。 我也嘗試過使用 -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對於瀏覽器來說太新了。 參考：我可以使用滾動條寬度嗎？

僅適用於 webkit 瀏覽器的其他解決方案（chrome、safari 和更新的邊緣）

 ::-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%； 背景顏色：灰色； }

請記住，此“背景顏色：灰色”用於滾動條背景，而不用於實際滾動條。

3. 讓我們讓實際的滾動條（移動部分）變成不同的顏色，現在使用 "::webkit-scrollbar-thumb" =>

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