How can I implement a custom horizontal scrollbar like the one shown in the attached image using Webflow?

To implement a custom horizontal scrollbar in Webflow like the one shown in your image, you’ll need to style a horizontal scrollable section and modify the scrollbar appearance using custom CSS embedded in Webflow.

​

1. Create the Horizontal Scroll Section

​

• Add a Div Block and name it something like “Scroll Wrapper.”
• Set Overflow to Scroll and choose Display: Flex with Direction: Horizontal (Row).
• Set White Space to No Wrap if you're using text or other inline elements.
• Add child elements (e.g., Image blocks, Cards, etc.) inside the wrapper, and set a fixed width for each to enable horizontal overflow.

​

2. Add Custom Scrollbar Styling

​

Webflow’s built-in controls don’t style native scrollbars, but you can add custom styles using custom code in the Page Settings or via an Embed element.

​

• Go to Page Settings > Inside <style> tag in the Before </head> area.
• Paste your custom CSS using Webkit pseudo-elements for scrollbar styling:

​

  ```

  <style>

    .scroll-wrapper::-webkit-scrollbar {

      height: 8px;

    }

​

    .scroll-wrapper::-webkit-scrollbar-track {

      background: #f0f0f0;

      border-radius: 4px;

    }

​

    .scroll-wrapper::-webkit-scrollbar-thumb {

      background-color: #888;

      border-radius: 4px;

      border: 2px solid #f0f0f0;

    }

​

    .scroll-wrapper::-webkit-scrollbar-thumb:hover {

      background-color: #555;

    }

  </style>

  ```

​

• Make sure your scroll section has the class scroll-wrapper (or use whatever class name you defined above).

​

3. Make Scroll Smoother (Optional)

​

• Add the following rule to your scroll container for better user experience:

​

  ```

  .scroll-wrapper {

    scroll-behavior: smooth;

  }

  ```

​

You can add this rule in the same <style> tag block or by setting it within Webflow’s Custom Code Embed.

​

4. Optimize for Touch Devices

​

• Horizontal scroll works well with touch gestures on mobile, but you can improve it further by setting:

​

• Overflow-X: auto
• Hide vertical scroll by setting Overflow-Y: hidden
• For iOS momentum scroll: add -webkit-overflow-scrolling: touch; in custom code if needed

​

Summary

​

To achieve a custom horizontal scrollbar in Webflow:

• Create a horizontally scrollable container using Flex and Overflow settings.
• Style the scrollbar with custom CSS using Webkit pseudo-elements in the Page Settings or an Embed.
• Add smooth scroll and mobile optimizations for better experience.

​

This gives you full visual control over the horizontal scrollbar’s appearance to match your reference image.