how to make scroll bar overlay content

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

<style>
  .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;
    }
</style>

Cons:

• Browser compatibility
• Similar result but not satisfactory