Help Center

How to Create a Vertical Scrollbar Within a Column

How to Create a Vertical Scrollbar Within a Column

With the help of this tutorial, you will be able to add a Vertical Scroll to any column of the website.

When the content on your website is divided into columns, it will look visually appealing, with all of them having the same height. The Vertical Scroll option of the JetElements plugin will help you put all the content you want into the column without stepping out of the block borders.

Follow the next few simple steps to add a Vertical Scroll to a column that is way too high.

Vertical scroll example

1 Step — Start with Elementor

Go to the page you want to edit and click the “Edit with Elementor” button to start. Search the page for the section with multiple columns. When one of them is much higher than the other, it looks like that:

original columns

2 Step — Proceed to editing

Hover the pointer over the column and hit the Edit Column button.

how to edit column in Elementor

Go to Advanced > JetAdvanced. Switch on the Column Vertical Scrollbar.

editing a column widget

3 Step — Define the height

Now you can choose the height of the column. Scale it manually or type in the precise height. There are three types of measure:

  • PX – pixels;
  • % – percent;
  • VH – 1/100 of the height of the viewport (this means that if the height of the browser is 1000px, VH will be equal to 10px).

4 Step — Pay attention to the note

The scroll will work more accurately if you follow the advice given in the note. In the Section editing mode, go to Layout and choose the “Fit to Screen” option for the Height. The Column Position row will appear immediately – set it to “Stretch” and the Vertical Align to “Default.”

When you finish defining the optimal height of the column – that’s it! A good-looking and convenient Vertical Scroll is now on your page. Congrats!

You don’t need to set the same height for all the columns in your layout. If you want to make the layout a little asymmetrical – it is up to you. Play with the general look until it completely pleases your taste. And good luck with that!

Was this article helpful?

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.