Reference guide for the Horizontal Scroll extension in DiviAnimator.
Requirements #
You need Divi Theme or Divi Builder, DiviAnimator, and the Horizontal Scroll Extension enabled. Requires Divi 5.
Overview #
Horizontal Scroll creates a horizontal scrolling effect on elements within the page. This extension lets you set the scrollable width and control when scrolling ends relative to the viewport.
Enabling the Extension #
- Go to DiviAnimator → Extensions in your WordPress admin
- Find Horizontal Scroll and toggle it on
- Click Save Settings
When enabled, horizontal scroll behavior is active on all elements using this extension. When disabled, elements scroll normally (vertically).
Width #
Controls the total scrollable width of the horizontal content. Range: 1-9999. Default: 300.
This value is combined with the Width Unit setting to determine the actual scroll area. For example, 300% means content scrolls across 300% of the viewport width.
- 100-150: Small horizontal scroll (slight overflow)
- 250-350: Standard scroll (significant horizontal content)
- 500+: Large scroll (full-width carousel or timeline)
Width Unit #
Determines how the Width value is interpreted.
| Unit | Behavior | Example |
| px | Pixels (fixed) | 300px = 300 pixels of scroll |
| % | Percentage of parent width | 300% = 3× parent width |
| vw | Viewport width (percentage) | 300vw = 3× screen width |
| em | Relative to element font size | 300em = 300× font size |
| rem | Relative to root font size | 300rem = 300× root font size |
Most common choice is % for content that needs to scale with the page. Use px for fixed scroll distances. Use vw for full-screen horizontal scenes.
Scroll End #
Controls where the horizontal scroll stops, measured in pixels from the right edge of the viewport. Range: 0-500. Default: 150.
This determines the end position of the scroll animation. Setting this to 0 means the content scrolls all the way to the left edge. Higher values leave padding/spacing at the end.
| Scroll End (px) | Effect |
| 0 | Scroll reaches left viewport edge |
| 50-100 | Small padding at end |
| 100-200 | Moderate spacing |
| 200+ | Large buffer (content stops before reaching edge) |
Debug Markers #
Shows visual markers on the page to help debug scroll behavior during development. Toggle on to display guides. Toggle off to hide them.
Debug markers appear as lines or boxes showing the scroll boundaries and current scroll position. Enable this during setup to verify scroll behavior is correct, then disable before publishing.
Configuration Guide #
Carousel Setup #
| Setting | Value | Reason |
| Width | 300 | 3 items visible at once |
| Width Unit | % | Scales with viewport |
| Scroll End | 150 | Standard padding |
Timeline/Process Flow Setup #
| Setting | Value | Reason |
| Width | 500-800 | Full-width scroll area |
| Width Unit | vw | Full viewport width scaling |
| Scroll End | 0-50 | Minimal or no padding |
Gallery/Portfolio Setup #
| Setting | Value | Reason |
| Width | 400-600 | Covers multiple items |
| Width Unit | % | Responsive to container |
| Scroll End | 100-150 | Breathing room at end |
General Tips #
- Use % or vw for responsive designs; use px only for fixed-width sections
- Enable Debug Markers during setup to visualize scroll boundaries
- Test horizontal scroll on mobile—some devices have different scroll behavior
- Keep Scroll End consistent with your design spacing
- Adjust Width to show the amount of content you want visible at once
Troubleshooting #
Horizontal scroll not working #
Verify the extension is enabled. Check that the element itself has enough content to scroll horizontally (Width value may be too small). Enable Debug Markers to see scroll boundaries.
Scroll area too small #
Increase the Width value. If using %, try a higher number like 400 or 500. If using vw, ensure the value is sufficient for your content.
Scroll area too large #
Decrease the Width value. Use Debug Markers to see current boundaries and adjust accordingly.
Content disappears during scroll #
Check the Scroll End value—it may be too high, cutting off content. Reduce it to allow content to scroll further. Verify parent container doesn't have overflow hidden.
Scroll position is wrong #
Enable Debug Markers to visualize the scroll start and end points. Adjust Scroll End value to move the stopping point.
Horizontal scroll not working on mobile #
Some mobile browsers limit horizontal scroll. Test in multiple browsers. Ensure Width unit is responsive (% or vw, not px). Check if parent container overflow is set correctly.
Elements overlap or misalign during scroll #
Verify child elements have proper sizing and spacing. Use Debug Markers to check the scroll area boundaries. Ensure parent has correct positioning (relative or absolute).
Support #
For issues or questions, contact support@diviexpand.com or submit a ticket through your DiviAnimator account.
© 2026 DiviAnimator. All rights reserved.
