Easy Elementor Scrolling Text Boxes, Columns, Sections & Elements

No extra plug-ins required! Elementor Free compatible!

Table of Contents

Demo targeting the Column

Features!

Demo Targeting directly the text element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit, nec ullamcorper mattis, pulvinar leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit, nec ullamcorper mattis, pulvinar leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit, nec ullamcorper mattis, pulvinar leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit, nec ullamcorper mattis, pulvinar leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit, nec ullamcorper mattis, pulvinar leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit, nec ullamcorper mattis, pulvinar leo.

Demo targeting the section

home
6 Greatest Elementor Appointment Booking Plugins
Great Design - Change Background Image on Hover in Elementor
Great Design - Change Background Image on Hover in Elementor

Learn how to easily add a vertical scroll bar to any Elementor element, column or section.

Easy Elementor Scrolling Text Boxes, Columns, Sections & Elements
Play Video

Use this code to make an Elementor scrolling text box, column or section

Simply copy paste this code in the Advanced > Custom CSS field of the target element

selector{
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
}

selector::-webkit-scrollbar{
width: 14px;
}

selector::-webkit-scrollbar-track{
background: rgba(0, 0, 0, 0.1);
}

selector::-webkit-scrollbar-thumb{
background: rgba(0, 0, 0, 0.31);
}

For ease of editing, it might be better to disable it in the Elementor editor. In this case, use the code below instead.

body:not(.elementor-editor-active) selector{
    max-height: 510px;
    overflow-x: hidden;
    overflow-y: scroll;
}

selector::-webkit-scrollbar{
width: 23px;
}

selector::-webkit-scrollbar-track{
background: rgba(144, 144, 144, 0.1);
}

selector::-webkit-scrollbar-thumb{
background: rgba(144, 144, 144, 0.31);
}

If you have Elementor Free, simply give the target element, column or section a class name (Under Advanced) , then replace 'selector' in the code, with the class name you gave the element.

Enjoy your Elementor scrolling text boxes, columns, sections & any other element!

Watch the video to fully understand how to use the code!

Don't hesitate to let me know if you need any help!

< News >

Enjoyed this tutorial? Get more awesome designs, right in your inbox!

No spam, not more than one weekly email.

Addons Resources
Addons
Resources
Addons
Finder Tool
Addons
Discount Codes
Addons
Review
< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Elementor Codes>