Perfect Scrollbar (jQuery)

by uto usui

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.10/js/perfect-scrollbar.jquery.js"></script>
<div class="wrap">
  <div class="inner">
    <div class="container">
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate aliquid cum est tenetur ducimus rerum quibusdam obcaecati praesentium explicabo reprehenderit corrupti voluptates illum deleniti minima, inventore enim commodi odit tempore.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate aliquid cum est tenetur ducimus rerum quibusdam obcaecati praesentium explicabo reprehenderit corrupti voluptates illum deleniti minima, inventore enim commodi odit tempore.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate aliquid cum est tenetur ducimus rerum quibusdam obcaecati praesentium explicabo reprehenderit corrupti voluptates illum deleniti minima, inventore enim commodi odit tempore.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate aliquid cum est tenetur ducimus rerum quibusdam obcaecati praesentium explicabo reprehenderit corrupti voluptates illum deleniti minima, inventore enim commodi odit tempore.</p>
      </div>
    </div>    
  </div>    
</div>

SCSS

* {
  box-sizing: border-box;
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 4em;
  perspective: 400px;
}

.inner {
  transform: rotateY(30deg) rotateX(-15deg) translateZ(-100px);
}

.container {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: auto;
}

.content {
  font-size: 20px;
  background-color: rgba(white,.9);
}


/* perfect-scrollbar v0.6.10 */

.ps-container {
  -ms-touch-action: none;
  touch-action: none;
  overflow: hidden !important;
  -ms-overflow-style: none;
  //
  > .ps-scrollbar-x-rail {
    display: none;
    position: absolute;
    /* please don't change 'position' */
    opacity: 1;
    transition: background-color .2s linear, opacity .2s linear;
    bottom: 3px;
    /* there must be 'bottom' for ps-scrollbar-x-rail */
    height: 8px;
    //
    > .ps-scrollbar-x {
      position: absolute;
      /* please don't change 'position' */
      background-color: #cbeef6;
      transition: background-color .2s linear;
      bottom: 0;
      /* there must be 'bottom' for ps-scrollbar-x */
      height: 8px;
    }
  }
  //
  > .ps-scrollbar-y-rail {
    display: none;
    position: absolute;
    /* please don't change 'position' */
    opacity: 1;
    transition: background-color .2s linear, opacity .2s linear;
    right: 0;
    /* there must be 'right' for ps-scrollbar-y-rail */
    width: 20px;
    background-color: #cbeef6;
    //
    > .ps-scrollbar-y {
      position: absolute;
      /* please don't change 'position' */
      background-color: #aaa;
      transition: background-color .2s linear;
      right: calc((20px - 14px) / 2);
      border-radius: 14px;
      /* there must be 'right' for ps-scrollbar-y */
      width: 14px;
      background-color: #5db6c9;
    }
  }
  //
  &.ps-active-x {
    //
    > .ps-scrollbar-x-rail {
      display: block;
      background-color: #cbeef6;
    }
    
  }
  //
  &.ps-active-y {
    //
    > .ps-scrollbar-y-rail {
     ...

JavaScript

$('.container').perfectScrollbar({
	wheelSpeed: .2,
  minScrollbarLength: 100
});