JSFiddle - React, Tailwind, and code Playground

by GlauberRocha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.8.1/js/perfect-scrollbar.jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="scroller">
      <p>90's +1 blue bottle, jianbing authentic organic portland VHS kale chips hella. Meh umami everyday carry mlkshk shabby chic pinterest. Umami vexillologist polaroid, mixtape blue bottle direct trade irony. Yuccie fixie knausgaard, skateboard bicycle
        rights prism master cleanse photo booth gluten-free mustache kitsch pitchfork pok pok. Plaid green juice asymmetrical, dreamcatcher bushwick man braid DIY blog pitchfork yuccie salvia bicycle rights chia VHS. Try-hard raclette williamsburg unicorn
        austin wolf cold-pressed. Pork belly glossier art party kitsch DIY mlkshk organic cornhole small batch chicharrones tilde tofu biodiesel. Jianbing squid mumblecore deep v subway tile shoreditch snackwave. Kinfolk pok pok activated charcoal, pork
        belly gentrify VHS jean shorts mlkshk kogi quinoa. Direct trade whatever ethical hexagon pinterest palo santo. Raw denim food truck direct trade you probably haven't heard of them, chartreuse meditation small batch artisan organic selvage taxidermy
        letterpress iceland. Sustainable sartorial small batch tofu, art party occupy kombucha prism pabst. Polaroid tote bag brooklyn, sartorial mumblecore beard mixtape pickled chillwave bespoke pinterest gochujang.
      </p>
      </p>
      <p>Poutine letterpress fanny pack, subway tile ennui sriracha XOXO mumblecore prism tattooed sustainable typewriter vaporware organic. Cold-pressed everyday carry vice brooklyn fanny pack, cliche cray cornhole hoodie etsy trust fund fashion axe. Blog
        forage bicycle rights hammock gastropub humblebrag jianbing kinfolk trust fund shaman. Truffaut occupy live-edge, 3 wolf moon seitan man braid paleo banjo chia flexitarian....

CSS

/* perfect-scrollbar v0.6.10 */

.ps-container {
  -ms-touch-action: none;
  touch-action: none;
  overflow: hidden !important;
  -ms-overflow-style: none
}

@supports (-ms-overflow-style: none) {
  .ps-container {
    overflow: auto !important
  }
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .ps-container {
    overflow: auto !important
  }
}

.ps-container.ps-active-x>.ps-scrollbar-x-rail,
.ps-container.ps-active-y>.ps-scrollbar-y-rail {
  display: block;
  background-color: transparent
}

.ps-container.ps-in-scrolling {
  pointer-events: none
}

.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail {
  background-color: #eee;
  opacity: 0.9
}

.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x {
  background-color: #999
}

.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail {
  background-color: #eee;
  opacity: 0.9
}

.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y {
  background-color: #999
}

.ps-container>.ps-scrollbar-x-rail {
  display: none;
  position: absolute;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  opacity: 0;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  -moz-transition: background-color .2s linear, opacity .2s linear;
  -o-transition: background-color .2s linear, opacity .2s linear;
  transition: background-color .2s linear, opacity .2s linear;
  bottom: 3px;
  height: 8px
}

.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x {
  position: absolute;
  background-color: #aaa;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: background-color .2s linear;
  -moz-transition: background-color .2s linear;
  -o-transition: background-color .2s linear;
  transition: background-color .2s linear;
  bottom: 0;
  height: 8px
}

.ps-container>.ps-scrollbar-y-rail {
  display: none;
  position: absolute;
  -webkit-border-radius: 4px;
  -moz-border-radius:...

JavaScript

$(() => {

  $(".container").perfectScrollbar({
    suppressScrollX: true,
    wheelSpeed: 3
  });



  /*
  $(".scroller")
    .addClass("animate")
    .on("transitionend", () => {
      $(".scroller").removeClass("animate");
    });
    */
});