在創建具有自定義css樣式的雙滾動時，拐角處有一個小白方塊。我怎樣才能讓它不可見？-有解無憂

正如您在下圖中看到的那樣，我有一個 Web 組件，它在 x 方向有一個滾動，在 y 方向有其他滾動，所以當我給他們一個自定義 css 樣式時，右下角的這個白色方塊看起來很糟糕，我的問題是：我怎樣才能讓它消失？謝謝！

在創建具有自定義 css 樣式的雙滾動時，拐角處有一個小白方塊。我怎樣才能讓它不可見？

有趣的事實：當我添加代碼片段時，我意識到 stackoverflow 或我的網路瀏覽器正在覆寫我的滾動樣式并使其看起來更好。就是這樣，但不知道如何在我的專案中重現它。

在創建具有自定義 css 樣式的雙滾動時，拐角處有一個小白方塊。我怎樣才能讓它不可見？

.box {
  border: 1px solid black;
  width: 5em;
  height: 5em;
  overflow: scroll;
  background: pink;
}


/* width */

::-webkit-scrollbar {
  width: .5rem;
  height: .5rem;
}


/* Track */

::-webkit-scrollbar-track {
  background: red;
}


/* Handle */

::-webkit-scrollbar-thumb {
  background: rgb(0, 0, 0);
  border-radius: 5em;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

<div class="box">
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaa</div>
</div>

uj5u.com熱心網友回復：

見::-webkit-scrollbar-corner。

.box {
  border: 1px solid black;
  width: 5em;
  height: 5em;
  overflow: scroll;
  background: pink;
}


/* width */

::-webkit-scrollbar {
  width: .5rem;
  height: .5rem;
}


/* Track */

::-webkit-scrollbar-track {
  background: red;
}


/* Handle */

::-webkit-scrollbar-thumb {
  background: rgb(0, 0, 0);
  border-radius: 5em;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

<div class="box">
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaa</div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/526145.html

標籤：htmlcss滚动

上一篇：如何在htmlcss中制作回應式網格布局

下一篇：如何用CSS創建斜線？