有什么方法可以调整滚动条以适合我的溢出 div 吗？

Question

我有一个自动溢出的 div，所以当内容大于 div 时它会产生一个滚动条。我在 div 周围也有一个边界半径。你可以明白我的意思here。

HTML

<div id="TimelinePlaceholder">
    <p>Lorem ipsum dolor sit amet, qui ad aliquam vituperatoribus, tantas eloquentiam sed 
    eu, amet animal maluisset at vim. Solum tation mel ex. Ut mea augue tacimates senserit.
    Vis at equidem facilisi indoctum, impetus intellegam ut qui, an eos autem latine 
    invenire. Atqui congue vocibus no eos.</p>

    <p>Vix at alia mediocrem dissentiet, alii efficiendi in usu, aperiam alterum 
    constituto in sed. Ei nec maiestatis voluptatibus. Quot labitur in ius, inermis 
    petentium constituto mea cu. Dicunt tamquam assentior eam an, eum ne singulis 
    expetenda adversarium. Vidisse dolorum laboramus usu et.</p>

    <p>Habeo copiosae maiestatis per no. At pri nostrum forensibus, explicari assueverit 
    per ne, eros altera nusquam vel ad. Nec hinc tantas te. Mutat novum moderatius ei qui, 
    vel maiestatis percipitur in, est bonorum forensibus quaerendum ne. Sea mazim dictas 
    tincidunt cu, quas expetendis scribentur id mel.</p>
</div>

CSS

#TimelinePlaceholder {
  max-height:200px;
  overflow-y:auto;
  border: 1px solid lightgrey;
  border-radius:20px;
}

#TimelinePlaceholder>p {
  font-size:20px;
}

你能看到滚动条是如何伸出边框边缘的吗？有没有办法将滚动条向左一点，使其适合边框？或者，使滚动条的外边缘也变圆，以便它们适合边框半径？

Answer 1

如果你想自己圆滚动条元素，你必须创建一个自定义滚动条，我没有太多经验。可能有一些工作。

一个简单的解决方法是通过添加一个额外的包装元素来剪裁滚动条的边缘来解决您的第二个选项。

.scroll-container {
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid lightgrey;
}
.scroll {
  max-height: 200px;
  overflow-y: auto;
}
.scroll > p {
  font-size: 20px;
}

<div class="scroll-container">

  <div class="scroll">

    <p>
      Lorem ipsum dolor sit amet, qui ad aliquam vituperatoribus, tantas eloquentiam sed eu, amet animal maluisset at vim. Solum tation mel ex. Ut mea augue tacimates senserit. Vis at equidem facilisi indoctum, impetus intellegam ut qui, an eos autem latine
      invenire. Atqui congue vocibus no eos.
    </p>

    <p>
      Vix at alia mediocrem dissentiet, alii efficiendi in usu, aperiam alterum constituto in sed. Ei nec maiestatis voluptatibus. Quot labitur in ius, inermis petentium constituto mea cu. Dicunt tamquam assentior eam an, eum ne singulis expetenda adversarium.
      Vidisse dolorum laboramus usu et.
    </p>

    <p>
      Habeo copiosae maiestatis per no. At pri nostrum forensibus, explicari assueverit per ne, eros altera nusquam vel ad. Nec hinc tantas te. Mutat novum moderatius ei qui, vel maiestatis percipitur in, est bonorum forensibus quaerendum ne. Sea mazim dictas
      tincidunt cu, quas expetendis scribentur id mel.
    </p>

  </div>

</div>

添加额外的元素是完美的，但很容易实现。