How can I implement a custom horizontal scrollbar like the one shown in the attached image using Webflow?
- Create a horizontally scrolling div (set to flex, overflow-x: scroll, overflow-y: hidden) with fixed-width child elements.
- Inject custom CSS in your project settings to fully style the scrollbar and enable smooth scrolling behavior.
To implement a custom horizontal scrollbar in Webflow (like in your reference image), you'll need to use Webflow's native styles and optionally inject custom CSS for further customization.
1. Set Up a Horizontal Scroll Section
- Create a div element to act as the scroll container (e.g., name it
scroll-wrapper). - Set the scroll container’s Display to Flex (Horizontal) and Overflow X to Scroll.
- Set Overflow Y to Hidden to prevent vertical scroll.
- Inside the scroll container, add child elements (e.g., cards or images).
- Style the child elements with a fixed Width (e.g., 300px) and add spacing via margin or gap.
2. Style the Scrollbar Natively in Webflow (Limited Control)
Webflow does not support full scrollbar customization natively in the Designer. You can style width and color to a small extent using custom CSS injected into the project settings.
3. Add Custom CSS for Scrollbar Styling
- Go to Project Settings > Custom Code > Inside tag or use Page Settings > Custom Code.
- Paste the following inline CSS using the
<style>tag:
<style>.scroll-wrapper::-webkit-scrollbar { height: 10px;}.scroll-wrapper::-webkit-scrollbar-track { background: #f0f0f0;}.scroll-wrapper::-webkit-scrollbar-thumb { background-color: #888; border-radius: 10px; border: 2px solid #f0f0f0;}/* Optional: Firefox Compatibility */.scroll-wrapper { scrollbar-width: thin; scrollbar-color: #888 #f0f0f0;}</style>4. Publish and Test Across Browsers
- Publish your site and test in Chrome, Firefox, and Safari.
- Webkit-based custom scrollbars (with
::-webkit-scrollbar) work in Chrome, Edge, and Safari. - Firefox uses
scrollbar-widthandscrollbar-color, which offer limited styling.
5. Make the Scroll Feel Natural
To improve UX:
- Enable smooth scroll with inertia by adding overflow scrolling for iOS:
.scroll-wrapper { -webkit-overflow-scrolling: touch; scroll-behavior: smooth;}Include this inside the same <style> tag mentioned earlier.
Summary
You can create a custom horizontal scrollbar in Webflow by building a horizontal scroll section with flex and using custom CSS to style the scrollbar. While Webflow Designer doesn’t offer full scrollbar control, injecting CSS gives you the styling flexibility needed for a polished horizontal scroll experience.