用CSS對滾動條應用邊框半徑

CSS

錢衛國2年前8瀏覽0評論

簡單地說，這就是我想要的(在Webkit瀏覽器上使用-webkit-scrollbar獲得) :

這是我在Opera上得到的結果(Firefox也沒有對滾動條應用邊框半徑，但仍然應用了邊框) :

有沒有簡單的方法讓邊框不在滾動條下消失？

我不需要-webkit-scrollbar的花哨樣式，但我希望頁面看起來干凈和對稱...

用overflow: auto將需要滾動的內容放在一個div中。在內容div周圍放置一個帶有圓角和溢出的div:hidden。

現在你可以看到滾動條，但它的外角是隱藏的不會干擾外部div的圓角。

示例:

// Insert placeholder text
document.querySelector('.inner').innerHTML = 'Text<br>'.repeat(20);

.outer {
  width: 150pt;
  border: 1px solid red;
  border-radius: 15pt;
  overflow: hidden;
}

.inner {
  height: 200px;
  overflow-y: auto;
}

<div class="outer">
    <div class="inner">
        <!-- lots of text here -->
    </div>
</div>

我也有同樣的問題。這不是最優雅的解決方案，但是，簡單地在你的外盒中放置一個較小的div，這樣滾動條就不會與外盒重疊。

比如從這支筆復制的這段代碼:

.box {
  height: 200px;
  width: 250px;
  border-radius: 10px;
  border: 2px solid #666;
  padding: 6px 0px;
  background: #ccc;
}

.box-content {
  height: 200px;
  width: 250px;
  overflow: auto;
  border-radius: 8px;
}

<div class="box">
  <div class="box-content">
    <ol>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ol>
  </div>
</div>

谷歌在展示他們的網絡應用時也實現了類似的功能。

enter image description here

在inspect元素和復制粘貼的幫助下，我得到了下面的代碼。

ul::-webkit-scrollbar-thumb {
  background-color: red;
  border: 4px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;  
}

ul::-webkit-scrollbar {
  width: 16px;
}

ul {
  overflow-y: scroll;
  margin: 0;
  padding: 0;
  width: 350px;
  max-height: 300px;
  background-color: #ddd;

  border-radius: 8px;
}

li {
  list-style-type: none;
  padding: 13px;
}

<ul>
  <li>google.com</li>
  <li>facebook.com</li>
  <li>twitter.com</li>
  <li>instagram.com</li>
  <li>linkedin.com</li>
  <li>reddit.com</li>
  <li>whatsapp.com</li>
  <li>tumblr.com</li>
  <li>skype.com</li>
</ul>

帶邊框半徑的水平滾動條。

::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

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

SCSS也是如此

::-webkit-scrollbar {
  width: 10px;
  height: 10px;

  &-track {
    background: #f1f1f1;
  }

  &-thumb {
    background: #888;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    &:hover {
      background: #555;
    }
  }
}

下面附上測試截圖: enter image description here

這和@馬丹·薩普科塔是一樣的，除了邊界半徑:10px在scrollbar和track類中不需要內部div

::-webkit-scrollbar {
   width: 10px;
   height: 10px;
   border-radius: 10px;
 }

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

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

圓角修身

@-moz-document url-prefix() {
    .scrollbar {
        overflow: auto;
        width: 0.5em !important;
        scroll-behavior: smooth !important;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
        background-color: darkgrey !important;
        outline: 1px solid slategrey !important;
        border-radius: 10px !important;
    }
}

::-webkit-scrollbar {
    width: 0.5em !important;
    scroll-behavior: smooth !important;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
}

::-webkit-scrollbar-thumb {
    background-color: darkgrey !important;
    outline: 1px solid slategrey !important;
    border-radius: 10px !important;
}

<div class="scrollbar" style="height: 600px">
   <h1>Scrollbar is slim with rounded corners</h1>
   <br/>
   <br/>
   <br/>
   <br/>
   <h1>Scrollbar is slim with rounded corners</h1>
   <br/>
   <br/>
   <br/>
   <br/>
   <h1>Scrollbar is slim with rounded corners</h1>
</div>

如果你需要一個超薄滾動條，這里是SCSS代碼

.custom-scroll {
  overflow: auto;
  scrollbar-color: #c1c1c1 #e6e6e6;
  scrollbar-width: thin;
  border-radius: 5px;
  border-radius: 10px !important;
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px !important;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
  &::-webkit-scrollbar-track {
    background: #e6e6e6;
    border-left: 1px solid transparent;
    border-radius: 10px !important;
  }
  &::-webkit-scrollbar {
    width: 7px;
    scroll-behavior: smooth !important;
  }
}

簡單的css代碼在這里

.custom-scroll {
  overflow: auto;
  scrollbar-color: #c1c1c1 #e6e6e6;
  scrollbar-width: thin;
  border-radius: 5px;
  border-radius: 10px !important;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px !important;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.custom-scroll::-webkit-scrollbar-track {
  background: #e6e6e6;
  border-left: 1px solid transparent;
  border-radius: 10px !important;
}
.custom-scroll::-webkit-scrollbar {
  width: 7px;
  scroll-behavior: smooth !important;
}

Html代碼行

<div class="custom-scroll" style="max-height:300px">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae quam vel consectetur enim aliquam unde libero sint, exercitationem voluptate doloribus, quasi veritatis accusantium itaque. In beatae recusandae possimus ea quae.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae quam vel consectetur enim aliquam unde libero sint, exercitationem voluptate doloribus, quasi veritatis accusantium itaque. In beatae recusandae possimus ea quae.</p>
</div>

輸出在淺色和深色皮膚上會看起來像這樣

enter image description here