How can I create a side-scroll effect in Webflow where content, such as images, can be scrolled left and right on mobile without using sliders?
- Create a div with Overflow X: Scroll and arrange child elements in a row using Flexbox or Inline-Block.
- Set fixed widths for children, add custom CSS for touch scrolling and optional scrollbar hiding.
To create a side-scroll effect in Webflow without using sliders, you can use horizontal overflow styling and flexbox or grid to arrange elements in a row.
1. Create a Horizontally Scrollable Wrapper
- Add a Div Block and give it a class name like "scroll-wrapper".
- In the Style panel, set:
- Overflow X to Scroll
- Overflow Y to Hidden
- White Space (under Typography) to Nowrap (if you're using inline layout)
- Optionally set padding or spacing to provide margins around the contents.
2. Add and Style the Scrollable Content
- Inside your scroll-wrapper, add child elements like image blocks, cards, or divs.
- Give each child a class like "scroll-item" and style as follows:
- Display: Set to Inline Block (if using self-wrapping layout) or use Flexbox on the parent wrapper with Horizontal direction.
- Fixed width (e.g. 200px–300px per item) to control layout in the scroll.
3. Use Flexbox for Better Layout Control (Optional)
- Set the "scroll-wrapper" display to Flex.
- Under Flex settings:
- Direction: Horizontal (Row)
- Wrap: No Wrap
- This keeps all the children aligned in a single horizontal row ready for horizontal scrolling.
4. Make It Touch-Friendly for Mobile
- Webflow handles touch scrolling automatically, but to optimize:
- On the scroll-wrapper, set -webkit-overflow-scrolling to touch using Custom CSS via Embed if necessary (Webflow doesn’t offer this via the UI).
- This ensures a smooth inertial scroll on iOS devices.
5. Hide Scrollbar (If Desired)
Webflow doesn’t support scrollbar styling in the Designer.
Add custom CSS Embed to hide scrollbar:
Example inside a Webflow Embed component:
Target your wrapper using a class selector like:
.scroll-wrapper::-webkit-scrollbar { display: none; }.scroll-wrapper { -ms-overflow-style: none; scrollbar-width: none; }(This won’t interfere with the touch-scroll functionality.)
Summary
To create a horizontal scroll effect on mobile in Webflow without sliders, use a scrollable wrapper with Overflow X: Scroll, set child items in a row using Flex or Inline-Block, and optionally style for touch behavior and hide the scrollbar with custom CSS.