Change scrollbar height in firefox-CodePudding

I want to change scrollbar height like this image (only for example)

I tried use ::webkit--scrollbar css properties and have got required behavior in chrome but firefox doesn't suport it.

CodePudding user response：

I recommend plugin simplebar js https://github.com/Grsmto/simplebar Easy to use and css you aply to it works on all browsers

CodePudding user response：

You can put your content inside a div tag and wrap it by another div outside, then set max-height for the inner `div i.e:

#wrapper {
  width: 300px;
  padding: 2rem;
  border-radius: 20px;
  background: rgb(254 249 195);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

#inner {
  padding: 0 1rem;
  max-height: 100px;
  overflow-y: scroll;
}


/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 16px;
}

*::-webkit-scrollbar-track {
  background: #ffffff;
}

*::-webkit-scrollbar-thumb {
  background-color: #8f54a0;
  border-radius: 10px;
  border: 3px solid #ffffff;
}

<div id="wrapper">
  <div id="inner">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>