在圆角 div 角 CSS 中剪辑滚动条答案

【问题标题】：Clip scrollbar inside rounded div corners CSS [duplicate]在圆角 div 角 CSS 中剪辑滚动条
【发布时间】：2020-05-26 12:12:32
【问题描述】：

我正在尝试在 div 中剪辑滚动条，以免它溢出圆角。请参阅下面的代码以获取问题的演示。

滚动条是否可以保持在同一位置，但多余的部分会被圆角“切断”，就好像它包含在 div 边框内而不是放在它们上面一样？

div {
  margin: 20px;
  width: 100px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 1px solid black;
  border-radius: 30px;
  display: inline-block;
}

p {
  float: left;
  width: 100%;
  padding: 10px;
}

<div>
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
</div>

【问题讨论】：

这能回答你的问题吗？ Apply Border-Radius To Scrollbars with CSS

标签： html css

【解决方案1】：

你需要像这样包装你的内容

.main {
  overflow: hidden;
  margin: 20px;
  width: 100px;
  border: 1px solid black;
  border-radius: 30px;
  display: inline-block;
}
.test {
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
}
p {
  float: left;
  width: 100%;
  padding: 10px;
}

<div class="main">
  <div class="test">
    <p>Item 1</p>
    <p>Item 2</p>
    <p>Item 3</p>
    <p>Item 4</p>
    <p>Item 5</p>
  </div>
</div>

【讨论】：

【解决方案2】：

有多种方法，但最简单和更好的方法是包装滚动 div 并应用样式。它会解决你的问题。

div.wrapper {
  margin: 20px;
  width: 100px;
  border: 1px solid black;
  border-radius: 30px;
  display: inline-block;
  padding: 1.2rem 0.05rem  1.2rem 0
}

div.scroll{
 overflow-x: hidden;
 overflow-y: scroll;
  height: 200px;

}

p {
  width: 100%;
  padding: 0 10px 10px;
  margin: 0;
}

/* width */
div.scroll::-webkit-scrollbar {
  width: 15px;

}

/* Track */
div.scroll::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 30px;
}
 
/* Handle */
div.scroll::-webkit-scrollbar-thumb {
  background: gray; 
  border-radius: 30px;
  
}

/* Handle on hover */
div.scroll::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}

<div class='wrapper'>
  <div class=scroll>
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
  <p>Item 5</p>
  <p>Item 5</p>
  <p>Item 5</p>
  <p>Item 5</p>
  </div>
</div>

【讨论】：

【解决方案3】：

你需要使用overflow:hidden隐藏溢出内容

.root {
  margin: 20px;
  width: 100px;
  border: 1px solid black;
  border-radius: 30px;
  display: inline-block;
  overflow: hidden;
}
.scrollIt {
  height: 250px;
  overflow-x: hidden;
  overflow-y: scroll;
}
p {
  width: 100%;
  padding: 10px 10px;
}

<div class="root">
 <div class="scrollIt">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
 </div>
</div>

【讨论】：