How to Use the Horizontal Scroller

Stackable’s Horizontal Scroller block allows you to scroll or drag horizontally across different columns. You can move through your content by swiping horizontally with touch screens, scrolling horizontally (holding shift + mouse wheel) or dragging your mouse horizontally.

Using the Horizontal Scroller Block

First add the Horizontal Scroller block to your post or page.

Once you’ve added the block, you will find a container that places 3 columns horizontally past the screen, allowing you to scroll and snap on each column.

Like the Columns block, you can add any block inside the columns of the Horizontal Scroller block, such as the Image block, Heading, etc. You can place any content inside your columns.

Layout Panel

In the Layout panel in the Layout tab of the inspector, you can adjust the following:

  • Columns setting - adjust the number of columns in the block.
  • Snapping options - choose whether scroll snapping will occur to the left of the scroller, or snap the columns to the center or end.
  • Item Width - to adjust the width of each column
  • Height - to adjust the height of all the columns
  • Gap - to adjust the gap between each column
  • Left Offset - this is helpful for aligning the first column with the rest of your content for full-width horizontal scrollers

Snapping

The Snapping option allows you to focus on a section when you stop scrolling through a snap. This setting may be useful in horizontal scrolling wherein there are sections, so the viewers can pause in between scrolling to the next section.

By default, the Snapping option is set to Snap to Start, however, you can choose between 3 options:

  1. Snap to Start
  2. Snap to Center
  3. No Snapping

Scrollbar

You can find the Scrollbar setting in the Style tab. This is for the scrollbar that you see at the bottom of the block.

By default, the scrollbar is hidden because the overflowing content to the sides can already be a good indicator to the reader that they can scroll horizontally.

You have the option to toggle it on or off, depending on whether you want it to be visible in the frontend.

If you choose to show it, there are various design settings for the scrollbar such as adjusting the height, track color, thumb color and thumb radius.

Designing the Horizontal Scroller Block

Just like other blocks, you can design the Horizontal Scroller block as well and you can style the block like you normally would with any Stackable block. You will find the same Layout, Style, and Advanced tabs in the inspector once you select the block.

In the Frontend

The good thing about this block is it saves a lot of space and doesn’t overwhelm your site visitors with loads of content. By using Stackable’s Horizontal Scroller, you can provide smaller pieces of information gradually as visitors engage in scrolling through the content. 🎉