Search code examples
cssreactjsgoogle-chromestylesscrollbar

Styling Scrollbar of the modal inside reactjs-popup

I have a reactjs-popup inside my CustomPopup functional component:

function CustomPopup({setFalse, item}){return(<Popup open={true} onClose={() => {setFalse(false)}} modal closeOnDocumentClick nested>
{item === "howto" ?
(close => (
  <div className="modal">
    <button className="close" onClick={close}>
      &times;
    </button>
    <div className="header"> HowTo </div>
    <div className="content">
      {'howto'}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum.
      Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates
      delectus doloremque, explicabo tempore dicta adipisci fugit amet dignissimos?
      <br />...

enter image description here

Now I want to change the style of the scrollbar and tried every approach I could find, but nothing seemed to apply.

I tried:

...setting it inside the modal and the modal-content:

  .modal > .content {
width: 100%;
padding: 10px 5px;
height: 750px;
overflow-y: scroll;
scrollbar-color: #6969dd}

...as universal selector:

*{
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-base-color: #6969dd;
  scrollbar-face-color: #6969dd;
  scrollbar-track-color: #6969dd;
  scrollbar-gutter: #6969dd;
}

...with the webkit:

  .modal::-webkit-scrollbar {
    width: 12px;               /* width of the entire scrollbar */
  }
  
  .modal::-webkit-scrollbar-track {
    background: orange;        /* color of the tracking area */
  }
  
  .modal::-webkit-scrollbar-thumb {
    background-color: blue;    /* color of the scroll thumb */
    border-radius: 20px;       /* roundness of the scroll thumb */
    border: 3px solid orange;  /* creates padding around scroll thumb */

Im using Edge and Chrome. Nothing worked for me, I am very thankful for every new approach.

Solution

  • Just wrap your Pop-up component inside div and apply these styles to main css

    div::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px #f8fbff;
border-radius: 5px;
 }

div::-webkit-scrollbar-thumb {
background-color: #9fa9bd;
border-radius: 5px;
}
div::-webkit-scrollbar {
width: 0.5em;
border-radius: 5px;
}