necrofish666 necrofish666 - 3 months ago 11
CSS Question

Any way of adjusting the scrollbar to fit within my overflow div?

I have a div with auto overflow, so it produces a scrollbar when the content is larger than the div. I also have a border around the div with border-radius. You can see what I mean 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;
}


Can you see how the scrollbar sticks out a bit over the edge of the border? Is there any way of bringing the scrollbar to the left a bit so that it fits within the border? Or alternatively, making the outer edges of the scrollbar rounded also so they fit in with the border-radius?

Answer

If you want to round the scroll bar element yourself you'd have to create a custom scrollbar, which I don't have much experience with. Could be some work.

An easy fix would be for your second option by clipping the edges of the scroll bar by adding an extra wrapper element.

.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>

Adding the extra element is perfect but pretty straight forward to implement.

Comments