how to make scroll bar overlay content

Question

How do I get the scrollbar to overlay div content?

already tried to use track with transparent background, but it does not work

::-webkit-scrollbar-track {background: transparent}

remains the same, occupying part of the content

.faq-body {
  width: 250px;
  height: 400px;
  background: #fff;
  overflow: scroll;
  border: 1px solid #7b7d7f;
}

.faq-body::-webkit-scrollbar {
  width: 16px;
}
.faq-body::-webkit-scrollbar-thumb {
  background-color: #7b7d7f;
  border: 5px solid #fff;
  border-radius: 10rem;
}
.faq-body::-webkit-scrollbar-track {
  position: absolute;
  right: -3rem;
  top: -50rem;
  background: transparent;
}

.faq-question {
  padding: 20px;
  border-bottom: 1px solid #000;
  line-height: 1.3;
  color: #15191b;
  font-size: 0.8rem;
}


    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question

Can someone help me?

Vitor Avan&#231;o · Accepted Answer

There are two ways to get a similar result:

Javascript Lib

Use http://grsmto.github.io/simplebar/

https://jsfiddle.net/w0a5Ls6h/

Pro:

Browser compatibility
Satisfactory result

Cons:

3rd javascript

or

Only CSS

  .faq-body {
  width: 250px;
  height: 400px;
  background: #fff;
  overflow-y: scroll;
  border: 1px solid #7b7d7f;
}

.faq-body::-webkit-scrollbar {
  width: 7px;
}
.faq-body::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.4);
  border-radius: 10rem;
  border: 1px solid #fff;
}


.faq-body::-webkit-scrollbar-track-piece:start {
  background: transparent;
}

.faq-body::-webkit-scrollbar-track-piece:end {
  background: transparent;
}
.faq-question {
  padding: 20px;
  border-bottom: 1px solid #000;
  line-height: 1.3;
  color: #15191b;
  font-size: 0.8rem;
}


    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question
    
    
      Question

Cons:

Browser compatibility
Similar result but not satisfactory

how to make scroll bar overlay content

Answers (2)

Related Questions