I pieced together how to have a div that's horizontal scrolling but I can't figure out how to stop the vertical scrolling while the user is in the div that's horizontal scrolling. I'm trying to enter the user into horizontal scrolling then back out to vertical. Currently, when the user is horizontal scrolling it's also vertical scrolling.
My Fiddle: https://jsfiddle.net/girdy74/rkpf140x/19/
jQuery(function() {
jQuery(".horizontal-scroll-wrapper .elementor-container").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
});
});
.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%;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
</head>
<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 horizontal-scroll-wrapper elementor-section-height-default elementor-section-height-default" data-id="5e57d97" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-37fee73 service-wrapper" data-id="37fee73" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-0ffae83 elementor-widget elementor-widget-image" data-id="0ffae83" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350"> </div>
</div>
<div class="elementor-element elementor-element-d4fe169 elementor-widget elementor-widget-spacer" data-id="d4fe169" data-element_type="widget" data-widget_type="spacer.default">
<div class="elementor-widget-container">
<div class="elementor-spacer">
<div class="elementor-spacer-inner"></div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-38c552f services-title elementor-widget elementor-widget-heading" data-id="38c552f" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">HR Management</h2>
</div>
</div>
<div class="elementor-element elementor-element-effcadb servcies-exc elementor-widget elementor-widget-text-editor" data-id="effcadb" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>We can help with HR Management.</p>
</div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-48647e0 service-wrapper" data-id="48647e0" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-1a962f0 elementor-widget elementor-widget-image" data-id="1a962f0" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350"> </div>
</div>
<div class="elementor-element elementor-element-6830704 elementor-widget elementor-widget-spacer" data-id="6830704" data-element_type="widget" data-widget_type="spacer.default">
<div class="elementor-widget-container">
<div class="elementor-spacer">
<div class="elementor-spacer-inner"></div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-ed7ce05 services-title elementor-widget elementor-widget-heading" data-id="ed7ce05" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">Payroll Processing</h2>
</div>
</div>
<div class="elementor-element elementor-element-f9b8f78 servcies-exc elementor-widget elementor-widget-text-editor" data-id="f9b8f78" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Help with compliance and efficency. </div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-bcc5cca service-wrapper" data-id="bcc5cca" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-a1c2bef elementor-widget elementor-widget-image" data-id="a1c2bef" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350"> </div>
</div>
<div class="elementor-element elementor-element-2d53af9 elementor-widget elementor-widget-spacer" data-id="2d53af9" data-element_type="widget" data-widget_type="spacer.default">
<div class="elementor-widget-container">
<div class="elementor-spacer">
<div class="elementor-spacer-inner"></div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-ddfc0ca services-title elementor-widget elementor-widget-heading" data-id="ddfc0ca" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">Benefits</h2>
</div>
</div>
<div class="elementor-element elementor-element-2670cb7 servcies-exc elementor-widget elementor-widget-text-editor" data-id="2670cb7" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Better benefits.. </div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-ca26df1 service-wrapper" data-id="ca26df1" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-ea43775 elementor-widget elementor-widget-image" data-id="ea43775" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350"> </div>
</div>
<div class="elementor-element elementor-element-c54d7f8 elementor-widget elementor-widget-spacer" data-id="c54d7f8" data-element_type="widget" data-widget_type="spacer.default">
<div class="elementor-widget-container">
<div class="elementor-spacer">
<div class="elementor-spacer-inner"></div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-a17f87c services-title elementor-widget elementor-widget-heading" data-id="a17f87c" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">Tax Help</h2>
</div>
</div>
<div class="elementor-element elementor-element-c21fff4 servcies-exc elementor-widget elementor-widget-text-editor" data-id="c21fff4" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Help with your tax reporting. </div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-9fb0b6d service-wrapper" data-id="9fb0b6d" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-1afb7f9 elementor-widget elementor-widget-image" data-id="1afb7f9" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350"> </div>
</div>
<div class="elementor-element elementor-element-399c80e elementor-widget elementor-widget-spacer" data-id="399c80e" data-element_type="widget" data-widget_type="spacer.default">
<div class="elementor-widget-container">
<div class="elementor-spacer">
<div class="elementor-spacer-inner"></div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-564366e services-title elementor-widget elementor-widget-heading" data-id="564366e" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">Workers' Compensation</h2>
</div>
</div>
<div class="elementor-element elementor-element-d6c3a48 servcies-exc elementor-widget elementor-widget-text-editor" data-id="d6c3a48" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Reduce overhead and protect your employees. </div>
</div>
</div>
</div>
</div>
</section>
<section>
<div>
<h2>Here is the bottom section. </h2>
<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>
</body>
</html>
Run code snippetHide resultsExpand snippet
CodePudding user response：
The mousewheel's default action leads to a scroll event so in order to prevent this we should use event.preventDefault(). I've also added a condition so that this only happens when there is room left to scroll - when it reaches the edges scrolling will not be prevented which gives a more natural result. Because we're hijacking the normal behaviour a user would expect this is the least we can do to compensate for that. I also recommend not using the full page width for the container so the user can choose to use the sides for page scrolling. For this example I've just given the whole page some extra margin.
jQuery(function() {
jQuery('.horizontal-scroll-wrapper .elementor-container').mousewheel(function(event, delta) {
if (delta < 0 && this.scrollLeft < this.scrollWidth-$(this).width() ||
delta > 0 && this.scrollLeft) event.preventDefault();
this.scrollLeft -= (delta * 30);
});
});body {
margin: 35px;
}
.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%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<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 horizontal-scroll-wrapper elementor-section-height-default elementor-section-height-default" data-id="5e57d97" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-37fee73 service-wrapper" data-id="37fee73" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-0ffae83 elementor-widget elementor-widget-image" data-id="0ffae83" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350">
</div>
</div>
<div class="elementor-element elementor-element-d4fe169 elementor-widget elementor-widget-spacer" data-id="d4fe169" data-element_type="widget" data-widget_type="spacer.default">
<div class="elementor-widget-container">
<div class="elementor-spacer">
<div class="elementor-spacer-inner"></div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-38c552f services-title elementor-widget elementor-widget-heading" data-id="38c552f" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">HR Management</h2>
</div>
</div>
<div class="elementor-element elementor-element-effcadb servcies-exc elementor-widget elementor-widget-text-editor" data-id="effcadb" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>We can help with HR Management.</p>
</div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-48647e0 service-wrapper" data-id="48647e0" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-1a962f0 elementor-widget elementor-widget-image" data-id="1a962f0" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350">
</div>
</div>
<div class="elementor-element elementor-element-6830704 elementor-widget elementor-widget-spacer" data-id="6830704" data-element_type="widget" data-widget_type="spacer.default">
<div class="elementor-widget-container">
<div class="elementor-spacer">
<div class="elementor-spacer-inner"></div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-ed7ce05 services-title elementor-widget elementor-widget-heading" data-id="ed7ce05" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">Payroll Processing</h2>
</div>
</div>
<div class="elementor-element elementor-element-f9b8f78 servcies-exc elementor-widget elementor-widget-text-editor" data-id="f9b8f78" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Help with compliance and efficency. </div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-bcc5cca service-wrapper" data-id="bcc5cca" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-a1c2bef elementor-widget elementor-widget-image" data-id="a1c2bef" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350">
</div>
</div>
<div class="elementor-element elementor-element-2d53af9 elementor-widget elementor-widget-spacer" data-id="2d53af9" data-element_type="widget" data-widget_type="spacer.default">
<div class="elementor-widget-container">
<div class="elementor-spacer">
<div class="elementor-spacer-inner"></div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-ddfc0ca services-title elementor-widget elementor-widget-heading" data-id="ddfc0ca" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">Benefits</h2>
</div>
</div>
<div class="elementor-element elementor-element-2670cb7 servcies-exc elementor-widget elementor-widget-text-editor" data-id="2670cb7" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Better benefits.. </div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-ca26df1 service-wrapper" data-id="ca26df1" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-ea43775 elementor-widget elementor-widget-image" data-id="ea43775" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350">
</div>
</div>
<div class="elementor-element elementor-element-c54d7f8 elementor-widget elementor-widget-spacer" data-id="c54d7f8" data-element_type="widget" data-widget_type="spacer.default">
<div class="elementor-widget-container">
<div class="elementor-spacer">
<div class="elementor-spacer-inner"></div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-a17f87c services-title elementor-widget elementor-widget-heading" data-id="a17f87c" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">Tax Help</h2>
</div>
</div>
<div class="elementor-element elementor-element-c21fff4 servcies-exc elementor-widget elementor-widget-text-editor" data-id="c21fff4" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Help with your tax reporting. </div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-9fb0b6d service-wrapper" data-id="9fb0b6d" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-1afb7f9 elementor-widget elementor-widget-image" data-id="1afb7f9" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350">
</div>
</div>
<div class="elementor-element elementor-element-399c80e elementor-widget elementor-widget-spacer" data-id="399c80e" data-element_type="widget" data-widget_type="spacer.default">
<div class="elementor-widget-container">
<div class="elementor-spacer">
<div class="elementor-spacer-inner"></div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-564366e services-title elementor-widget elementor-widget-heading" data-id="564366e" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">Workers' Compensation</h2>
</div>
</div>
<div class="elementor-element elementor-element-d6c3a48 servcies-exc elementor-widget elementor-widget-text-editor" data-id="d6c3a48" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
Reduce overhead and protect your employees. </div>
</div>
</div>
</div>
</div>
</section>
<section>
<div>
<h2>Here is the bottom section. </h2>
<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>