属性scrollbar-width在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;        }      }有人可以想出一个可能的解决方案吗？

Answer 1

对于浏览器来说太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 中，您可以看到“scrollbar-width”在浏览器中非常不受欢迎，因此这可能是它不起作用的原因 =>

你可以像这样使用WebKit

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

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

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

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

1. 让我们将实际的滚动条（移动部分）设置为不同的颜色，现在使用“::webkit-scrollbar-thumb”=>

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