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 () {
    $('#thumbnailCarousel').bind('mousewheel', function(e){
      $(this).carousel('next');
    });
    $('#thumbnailCarousel').mouseover(function() {
      $('body').css('overflow-y','hidden');
      $('body').css('padding-right', '17px');
    });
    $('#thumbnailCarousel').mouseleave(function() {
      $('body').css('overflow-y','scroll'),
      $('body').css('padding-right', '0px');
    });
});