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’s seamless across scroll, cursor drag, and touch swipe, and hides scrollbars in all modern browsers, follow the steps below.

1. Structure Your Elements

• Add a Section to your page. Give it a class like horizontal-scroll-section.
• Inside, insert a div block to act as the scroll container; name it something like scroll-wrapper.
• Inside the wrapper, create a div block called scroll-track to hold the horizontally arranged content.
• Within the scroll-track, add your scrollable child items.

2. Apply Horizontal Scroll Layout

• Set scroll-wrapper:
• Display: Block
• Overflow-X: Scroll
• Overflow-Y: Hidden
• White Space: No Wrap
• Hide Scrollbars: Apply combo styles (see next step)
• Set scroll-track:
• Display: Flex
• Direction: Row
• Width: Auto or large enough to scroll
• Height: 100%

3. Hide Scrollbars (Cross-Browser)

Webflow doesn’t have full visual support to hide all scrollbars, so use embedded CSS:

• Go to Page Settings > Custom Code > Inside Head

• Insert the following inline:

  ```html

  ```

4. Make Cursor Drag Work

Webflow doesn’t natively support horizontal dragging with mouse cursor, so use a small custom script. Paste this in Page Settings > Footer Custom Code:

```html

```

5. Ensure Touch Support

• Touch scroll works by default on mobile devices when overflow-x is set to scroll.
• The above setup ensures users can swipe naturally.

Summary

Build a horizontally scrolling section with:

• overflow-x: scroll and white-space: nowrap,
• Hidden scrollbars using CSS for all major browsers,
• Custom cursor-drag script for desktop,
• Automatic touch support on mobile.

This setup provides a user-friendly horizontal scrolling experience optimized for scroll wheel, mouse drag, and touch swipe—without visible scrollbars.