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

TL;DR

Create a scroll wrapper div with overflow-x: scroll, white-space: nowrap, and child elements set to inline-block or inline-flex.
Add custom CSS to hide scrollbars across browsers and optionally insert JavaScript for desktop cursor-drag scrolling.

You want to create a horizontal scrolling section in Webflow that's responsive to scroll, touch, and cursor input, while also hiding scrollbars across all browsers.

1. Set Up Your Horizontal Scrolling Section

Add a Section element to your Webflow page.
Inside it, add a Div Block that will act as the horizontal scroll wrapper and set this wrapper to overflow-x: scroll and white-space: nowrap.
Inside the scrolling wrapper, add multiple child Div Blocks or elements (like images or cards) that are inline-block or set to display: inline-flex.

2. Enable Scroll Interaction (Touch and Mouse)

Webflow automatically supports touch scrolling and mousewheel horizontal scrolling if you apply the right styles:
Set the scroll wrapper's overflow-x: scroll and overflow-y: hidden.
Ensure that child elements have a fixed width (e.g., 300px) and only fit horizontally (no wrapping).
On mobile devices, horizontal swipes will work natively.
On desktops, users can scroll using trackpads or horizontally drag with scrollbar-disabled techniques (if implemented, see below).

3. Hide Scrollbars Across All Browsers

Custom CSS is required for consistent scrollbar hiding. In Webflow:
Go to Page Settings > Inside <head> or <body> tag and add this style inline:

```

<style>

.scroll-wrapper {

-ms-overflow-style: none; / IE and Edge /

scrollbar-width: none; / Firefox /

}

.scroll-wrapper::-webkit-scrollbar {

display: none; / Chrome, Safari and Opera /

}

</style>

```

Make sure your scrollable div uses the class scroll-wrapper.

4. Add Optional Cursor-Drag Functionality

Webflow does not offer native "click-and-drag to scroll" interaction.
You can manually implement this using custom JavaScript. Add this in the Before </body> tag section:

```

const slider = document.querySelector('.scroll-wrapper');

let isDown = false;

let startX;

let scrollLeft;

slider.addEventListener('mousedown', e => {

isDown = true;

slider.classList.add('active');

startX = e.pageX - slider.offsetLeft;

scrollLeft = slider.scrollLeft;

});

slider.addEventListener('mouseleave', () => {

isDown = false;

slider.classList.remove('active');

});

slider.addEventListener('mouseup', () => {

isDown = false;

slider.classList.remove('active');

});

slider.addEventListener('mousemove', e => {

if (!isDown) return;

e.preventDefault();

const x = e.pageX - slider.offsetLeft;

const walk = (x - startX) * 2; // Adjust scroll speed here

slider.scrollLeft = scrollLeft - walk;

});

</script>

```

Mobile touch functionality remains native and unaffected by this.

5. Test Across Browsers

Preview in Chrome, Safari, Firefox, and mobile browsers to confirm:
Scrolling works with trackpad, touch, and optionally drag.
Scrollbars are hidden on all platforms.

Summary

Build a horizontal scroll section using a div with overflow-x: scroll, use custom CSS to hide scrollbars, and optionally add custom JavaScript for cursor-drag support. This approach ensures compatibility across all browsers and input types.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer