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
Learn how to easily add a vertical scroll bar to any Elementor element, column or section.
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!