CSS Code for Scrollable Text Block in Elementor

Written by :

Posted on :

Tags :

Share :

Facebook
Twitter
LinkedIn
Reddit
Pinterest

What This CSS Code Does:

Adds a scrollbar to any specified block of text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Quis imperdiet massa tincidunt nunc pulvinar sapien. Lobortis feugiat vivamus at augue eget arcu dictum varius. Gravida neque convallis a cras semper. Eget felis eget nunc lobortis mattis. Viverra aliquet eget sit amet tellus cras. Orci a scelerisque purus semper eget duis at tellus. Risus feugiat in ante metus dictum at tempor. Euismod lacinia at quis risus sed vulputate odio ut enim. A erat nam at lectus urna duis convallis convallis tellus. Sagittis vitae et leo duis ut diam. Aenean et tortor at risus viverra adipiscing at in tellus. Placerat vestibulum lectus mauris ultrices eros in cursus. Eget aliquet nibh praesent tristique magna sit amet purus. Ultricies integer quis auctor elit sed.

Porttitor leo a diam sollicitudin. Malesuada nunc vel risus commodo viverra maecenas accumsan. Tincidunt id aliquet risus feugiat in ante. Vel orci porta non pulvinar neque laoreet. Ut etiam sit amet nisl purus in mollis nunc sed. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. Dui accumsan sit amet nulla. Condimentum id venenatis a condimentum. In hendrerit gravida rutrum quisque non tellus. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Egestas sed sed risus pretium quam vulputate. Proin sed libero enim sed. Nec tincidunt praesent semper feugiat. Elit sed vulputate mi sit amet mauris commodo. Dignissim enim sit amet venenatis urna.

Ultricies tristique nulla aliquet enim. Vulputate sapien nec sagittis aliquam malesuada bibendum. Viverra adipiscing at in tellus. Pellentesque elit eget gravida cum sociis natoque penatibus et magnis. Est lorem ipsum dolor sit amet consectetur. Semper feugiat nibh sed pulvinar proin gravida. Nibh ipsum consequat nisl vel pretium lectus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at. Consequat semper viverra nam libero justo. Molestie at elementum eu facilisis sed odio morbi quis. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Diam donec adipiscing tristique risus. Quis varius quam quisque id diam vel quam elementum pulvinar. Convallis tellus id interdum velit laoreet id donec. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Donec adipiscing tristique risus nec feugiat.

Egestas dui id ornare arcu odio ut sem. Cursus sit amet dictum sit amet justo donec enim diam. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Est velit egestas dui id ornare arcu odio. Sagittis eu volutpat odio facilisis. Erat nam at lectus urna. Sit amet purus gravida quis blandit turpis cursus in hac. Tellus id interdum velit laoreet id. Sed risus ultricies tristique nulla aliquet enim tortor at. Sed odio morbi quis commodo odio aenean sed. Sit amet mauris commodo quis imperdiet massa tincidunt. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Consequat ac felis donec et odio pellentesque diam volutpat commodo. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Enim ut sem viverra aliquet eget sit amet tellus cras. Ac feugiat sed lectus vestibulum mattis. In eu mi bibendum neque egestas congue quisque.

Velit scelerisque in dictum non consectetur. Turpis in eu mi bibendum. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Urna condimentum mattis pellentesque id nibh tortor id aliquet. Commodo viverra maecenas accumsan lacus vel facilisis. Enim lobortis scelerisque fermentum dui faucibus in ornare. In est ante in nibh. Pulvinar neque laoreet suspendisse interdum. Dui vivamus arcu felis bibendum ut tristique et egestas quis. Elit duis tristique sollicitudin nibh. Magna fringilla urna porttitor rhoncus. In ornare quam viverra orci. Id leo in vitae turpis massa sed elementum. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Consectetur adipiscing elit pellentesque habitant.

How To Implement:

Got to Advanced > Custom CSS of the text element and paste in the code bellow. You can easily change the height before the scroll begins, the width of the scroll bar, and the individual colors of the track and scroll bar.

The Code:

				
					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);
}
				
			

Leave a Reply

Your email address will not be published. Required fields are marked *

READY FOR A TOTALLY AWESOME WEBSITE?