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

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:

    ```

    <script>

      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.