JSFiddle - React, Tailwind, and code Playground

by girdy74

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<html>
<body class="wrapper">
<section><div>
<h2>Content here</h2>
<p>Vertical Scrolling is up at the top. Once the user gets to the row of images, horizontal scrolling. Then, back to vertical scrolling after horizontal scrolling. 
</p>
<p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

</div></section>
  <section class="elementor-section elementor-top-section elementor-element elementor-element-5e57d97 elementor-section-full_width...

CSS

.horizontal-scroll-wrapper .elementor-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 20px 0 40px 0;
}
.horizontal-scroll-wrapper .elementor-container div {
    margin: 0 10px;
    width: 500px !important;
}
.service-wrapper img {
    width: 100%;
}

JavaScript

jQuery(function() {

   jQuery(".horizontal-scroll-wrapper .elementor-container").mousewheel(function(event, delta) {
      this.scrollLeft -= (delta * 30);
   });

});