属性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您有一个具有滚动功能的元素。在同一个滚动元素上设置“::-webkit-scrollbar” =>.scroll-element::-webkit-scrollbar { 宽度：4px; 高度：100%；背景颜色：灰色；}请记住，此“背景颜色：灰色”适用于滚动条背景，而不适用于实际滚动条。让我们将实际的滚动条（移动部分）设置为不同的颜色，现在使用“::webkit-scrollbar-thumb”=>.scroll-element::-webkit-scrollbar-thumb { 背景：#000; }