JSFiddle - React, Tailwind, and code Playground

HTML

<div class="horizontal-scrollbar">
  <div class="horizontal-scrollbar__buttons">
    <div class="horizontal-scrollbar__button-left">
      <img src="http://s1.iconbird.com/ico/2014/1/598/w512h5121390846436left512.png" alt="">
    </div>
    <div class="horizontal-scrollbar__button-right is-visible">
      <img src="http://www.pngmart.com/files/3/Right-Arrow-PNG-Clipart.png" alt="">
    </div>
  </div>
  <div class="horizontal-scrollbar__content">
    <div class="content">text</div>
  </div>
</div>


<button class="click">скрыть отобразить кнопку</button>

SCSS

.horizontal-scrollbar {
  
  &__buttons {
    position: relative;
  }

  &__button-left {
    position: absolute;
    top: 20px;
    left: 0;
    opacity: 0;
    transition: opacity 1s;

    img {
      position: relative;
      height: 25px;
      width: 25px;
      cursor: pointer;
      z-index: 9;
    }

    &:after {
      position: absolute;
      top: -30px;
      left: 0;
      display: block;
      content: '';
      width: 100px;
      height: 90px;
      background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0.20));
      z-index: 5;
    }

    &.is-visible {
      opacity: 1;
      
    }
  }

  &__button-right {
    position: absolute;
    top: 20px;
    right: 0;
    opacity: 0;

    img {
      position: relative;
      height: 25px;
      cursor: pointer;
      z-index: 9;
    }

    &:after {
      position: absolute;
      top: -30px;
      right: 0;
      display: block;
      content: '';
      width: 100px;
      height: 90px;
      background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0.20));
      z-index: 5;
    }

    &.is-visible {
      opacity: 1;
      transition: opacity 1s;
    }
  }

  &__content {
    width: 100%;
    background-color: red;
    color: white;
    font-weight: 700;
    height: 70px;
    display: flex;
    justify-content: center;
  }

  /* Overrides for scrollbar */

  .mCSB_draggerContainer {
    display: none;
  }
}

.click {
  margin-top: 50px;
}

JavaScript

$( document ).ready(function() {
   $('.click').on('click', function() {
      $('.horizontal-scrollbar__button-left').toggleClass('is-visible');
    });
});