How can I create a scroll-friendly, cursor-friendly, and touch-friendly horizontal scrolling section in Webflow with no scroll bars on any browsers?

To build a horizontal scrolling section in Webflow that works smoothly with mouse wheels, touch gestures, and hides scroll bars across all browsers, follow these steps:

1. Design Your Section Layout

• Use a div block as a container for your horizontal content.
• Set this container to Display: Flex, with Direction: Row and Overflow: Hidden.
• Inside this container, place child elements with fixed or relative widths, depending on your design.

2. Enable Smooth Horizontal Scrolling

• Add a second inner scroll-wrapper div inside the container and place your content inside it.
• Set this inner wrapper to:
• Overflow: Scroll
• White-space: nowrap
• Flex: None (so it doesn’t auto-resize children vertically)
• This creates native horizontal scrolling behavior (via touch and scroll gestures).

3. Hide Scrollbars Cross-Browser

• Use Webflow’s custom code embeds in Page Settings > Before tag to hide scrollbars:

<style>.scroll-wrapper {  scrollbar-width: none; /* Firefox */  -ms-overflow-style: none;  /* IE/Edge */}.scroll-wrapper::-webkit-scrollbar {  display: none; /* Chrome/Safari */}</style>

• Replace .scroll-wrapper with the actual class name you’re using.

4. Enable Mouse Wheel Horizontal Scroll

• To translate vertical scrolling into horizontal, add a JS embed in Before tag:

<script>  const scrollContainer = document.querySelector('.scroll-wrapper');  scrollContainer.addEventListener('wheel', function(e) {    e.preventDefault();    scrollContainer.scrollLeft += e.deltaY;  });</script>

• Ensure .scroll-wrapper matches your class name from Webflow.
• This converts vertical wheel actions into horizontal scroll and works on desktop/mouse interactions.

5. Ensure Touch Scrolling Works

• Native mobile devices support horizontal scroll gestures out of the box.
• Ensure your .scroll-wrapper element has Overflow: Scroll enabled on all breakpoints.

6. Add Horizontal Snap (Optional)

• If you want content to snap during scroll:
• Set scroll-wrapper to scroll-snap-type: x mandatory;.
• For each scrollable child, add scroll-snap-align: start; in custom code or style panel.

Summary

Create a horizontal scrollable wrapper with flex-row layout and horizontal overflow, hide scrollbars via custom CSS, convert vertical scroll to horizontal with JS, and support touch by ensuring native scrolling remains enabled. This setup ensures a clean, scroll-friendly, cursor-friendly, and touch-compatible horizontal scroll section in Webflow.