Question 261467 in CSS Question posted in
Some basic documentation can be found here.

Css – hide overflow scrollbar on modal

I have a modal with a scrollbar.

  • The modal has a border-radius of 12px
  • The scrollbar has 12px radius too

Problem, the radius does not match.
I would like the part of the scroll bar that is outside of the modal to be hidden.

Here is a playground

Here is the test code :

<div class="h-screen w-screen bg-gray-300">
  <div class="fixed left-1/2 top-1/2 h-fit max-h-[70px] w-[200px] -translate-x-1/2 -translate-y-1/2 overflow-y-scroll overflow-hidden rounded-xl bg-white p-3 text-center">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    I think this is a pretty fairly common thing, as I had it like 4 years ago. Surprised its not been fixed yet.

    1. Create an outer container for the modal with border-radius and overflow: hidden. Similar tricks to adding border on images, or other elements that "block it"
    2. Add the custom scrollbar styling to the inner content container.
    3. The scrollbar will not extend outside the modal’s border-radius because of the overflow: hidden on the outer container.

    Here’s how you can modify your code:

    HTML:

    <div class="h-screen w-screen bg-gray-300">
  <div class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white overflow-hidden rounded-xl">
    <div class="h-fit max-h-[70px] w-[200px] overflow-y-scroll p-3 text-center">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    </div>
  </div>
</div>

    CSS (Tailwind CSS plus additional scrollbar styling):

    /* Add these styles to your styles.css if you're using a build process with TailwindCSS or directly in your HTML file */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: gray; /* you can choose any color */
    border-radius: 12px;
}

::-webkit-scrollbar-track {
    background-color: #f0f0f0; /* you can choose any color */
}
    Login or Signup to reply.
  2. 0

    Wrap the content that needs to be scrolled in a div remove the classes max-h-[70px] w-[200px] overflow-y-scroll from parent and place in the new div class.

    <script src="https://cdn.tailwindcss.com"></script>
<div class="h-screen w-screen bg-gray-300">
  <div class="fixed left-1/2 top-1/2 h-fit  -translate-x-1/2 -translate-y-1/2  overflow-hidden rounded-xl bg-white text-center">
    <div class="max-h-[70px] w-[200px] overflow-y-scroll">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    <div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search