JSFiddle - React, Tailwind, and code Playground

HTML

<!-- repeat an element to force scrolling -->
<div id="thumbnailCarousel" class="carousel">
    This represents the thumbnail carousel
</div>
<div class="image-item">
    <img src="abc.jpg" />
</div>
<div class="image-item">
    <img src="abc.jpg" />
</div>
<div class="image-item">
    <img src="abc.jpg" />
</div><div class="image-item">
    <img src="abc.jpg" />
</div>
<div class="image-item">
    <img src="abc.jpg" />
</div>
<div class="image-item">
    <img src="abc.jpg" />
</div>
<div class="image-item">
    <img src="abc.jpg" />
</div>
<div class="image-item">
    <img src="abc.jpg" />
</div>

CSS

.image-item {
    width: 100px;
    height: 100px;
    display: block;
}

.carousel {
    width: 100%;
    height: 200px;
    border: 1px solid black;
    display: block;
    text-align: right;
}

JavaScript

function getScrollBarWidth() {
  var inner = document.createElement('p');
  inner.style.width = "100%";
  inner.style.height = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "200px";
  outer.style.height = "150px";
  outer.style.overflow = "hidden";
  outer.appendChild (inner);

  document.body.appendChild (outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild (outer);

  return (w1 - w2);
};

$(function () {
    $('#thumbnailCarousel').bind('mousewheel', function(e){
      $(this).carousel('next');
    });
    $('#thumbnailCarousel').mouseover(function() {
      $('body').css('overflow-y','hidden');
      $('body').css('padding-right', getScrollBarWidth() + 'px');
    });
    $('#thumbnailCarousel').mouseleave(function() {
      $('body').css('overflow-y','scroll'),
      $('body').css('padding-right', '0px');
    });
});