JSFiddle - React, Tailwind, and code Playground

by goldorak

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-scroll-stop.min.js"></script>
<div id="app">
  <div class="scroll-block parent">
    <div class="child-wrap">
      <div class="scroll-block child" v-scroll-stop="isScrollStop">
        <p class="content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum dignissim venenatis. Proin augue enim, viverra a ligula sed, malesuada varius eros. Sed nec eros ut nulla gravida fringilla at non justo. Cras facilisis libero augue, sit amet sagittis
          leo iaculis in. Donec placerat, nulla blandit suscipit tristique, eros leo mollis mi, et ultrices tellus erat ac dui. Duis imperdiet ex urna, id finibus diam tempus at. Etiam et magna vitae neque eleifend ultrices. In nunc enim, laoreet non
          urna id, vehicula eleifend sem. In hac habitasse platea dictumst. Aenean leo risus, pretium nec rutrum a, luctus at ipsum. Suspendisse elementum eget ex vel lobortis. Quisque feugiat magna sem, non semper arcu vulputate quis. Etiam quis ipsum
          at arcu auctor vulputate. Nulla facilisi. Aliquam velit mi, eleifend a urna non, dapibus viverra mi. Etiam sit amet facilisis ipsum.
        </p>
      </div>
    </div>
  </div>
</div>

SCSS

body  {
  padding: 30px;
}

.child-wrap {
  width: 300px;
  height: 300px;
}

.scroll-block {
  width: 200px;
  height: 200px;
  overflow: scroll;
  background-color: #fafafa;
  padding: 20px;
  
  &.parent {
    width: 250px;
    height: 250px;
    padding: 20px;
    background-color: #555;
  }
  
  &.child {
     width: 200px;
     height: 200px;
  }
  &::-webkit-scrollbar-track {
    border: 1px solid #ccc;
	  background-color: #F5F5F5; 
  }
  
  &::-webkit-scrollbar {
  	width: 12px;
	  background-color: #F5F5F5;
  }
  
  &::-webkit-scrollbar-thumb{
	  background-color: #aaa;
  }
}

.content {
  width: 350px;
}

JavaScript

Vue.use(VueScrollStop);

new Vue({
  el: '#app',
  data: {
    isScrollStop: true
  },
  mounted() {
    setTimeout(() => {
      // Uncomment next line, if you want to test reactive
      this.isScrollStop = false;
    }, 5000);
  }
})