亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

屬性scrollbar-width在CSS中不起作用

屬性scrollbar-width在CSS中不起作用

拉丁的傳說 2023-10-04 15:03:26
我試圖將滾動條的寬度設置為“薄”和“無”,但它們都不起作用。我也嘗試過使用 -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;        }      }有人可以想出一個可能的解決方案嗎?
查看完整描述

2 回答

?
海綿寶寶撒

TA貢獻1809條經驗 獲得超8個贊

對于瀏覽器來說太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>


查看完整回答
反對 回復 2023-10-04
?
千萬里不及你

TA貢獻1784條經驗 獲得超9個贊

從下面的 URL 中,您可以看到“scrollbar-width”在瀏覽器中非常不受歡迎,因此這可能是它不起作用的原因 =>

你可以像這樣使用WebKit

  1. 您有一個具有滾動功能的元素。

  2. 在同一個滾動元素上設置“::-webkit-scrollbar” =>

    .scroll-element::-webkit-scrollbar { 寬度:4px;?高度:100%;背景顏色:灰色;}

請記住,此“背景顏色:灰色”適用于滾動條背景,而不適用于實際滾動條。

  1. 讓我們將實際的滾動條(移動部分)設置為不同的顏色,現在使用“::webkit-scrollbar-thumb”=>

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


查看完整回答
反對 回復 2023-10-04
  • 2 回答
  • 0 關注
  • 800 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號