Easy Elementor Scrolling Text Boxes, Columns, Sections & Elements
Get Premium

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

Easy Elementor Scrolling Text Boxes, Columns, Sections & Elements
6 Greatest Elementor Appointment Booking Plugins in 2023
Great Design - Change Background Image on Hover in Elementor
Great Design - Change Background Image on Hover in Elementor

You can also check out these related premium tutorials:

 

Elementor Cross Fade Images on Scroll Design

 

Elementor Split Scroll Design

 

Elementor Off Canvas Container Toggle Design

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

<script> 
/* Please login to get the code 
 * The code will be for the Easy Elementor Scrolling Text Boxes, Columns, Sections & Elements tutorial 
 * Found at this URL https://element.how/elementor-scrolling-text-box/ 
 */ 
</script>

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

<script> 
/* Please login to get the code 
 * The code will be for the Easy Elementor Scrolling Text Boxes, Columns, Sections & Elements tutorial 
 * Found at this URL https://element.how/elementor-scrolling-text-box/ 
 */ 
</script>

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.

Learn more about adding CSS to Elementor free.

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!

Tagged

69 Responses

      1. Sorry there was a typo in my post just now. It is RTL as in right-to-left.

        direction: rtl;

  6. Hello
    I did exactly what the video says (code1). In the Elementor Editor I see the scrollbars normally, but when on the live page I do not see it. Why? (in Win10, Firefox, ElementorPro),
    with code 2 as I see it above with copy paste without changing anything at all, nothing was done .

      1. Yes. The code provided will style the scroll bars everywhere except Firefox. There they will have the 'default' look.

    1. To have it only on desktop, simply wrap the whole code in a desktop media query!

      @media (min-width:1025px){
      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);
      }
      }

  11. Thank you very much, it is very easy to use and works perfectly. I just have one issue, I placed the exact same code two times on the same page but it works for one of the boxes. The other box just shows a regular text field without scrolling bar on the live page. What am I doing wrong?

    1. Welcome Veronika! The code should be working fine for any amount of them... Hopefully you managed to solve this! If not, share you url, I will have a look!

  14. Thanks Maxime, this works great ... on Chrome. Like the user above, the change isn't working for me on Chrome or Safari. Any advice to fix that? I have cleared cache, removed Nitropack caching from that page.

    1. To be clear, the only part that doesn't work on Safari is the styling of the scroll bar right? It's simply because Safari doesn't allow for this... The scroll box itself should work just fine however.

      Maybe the same is true for Firefox.

      Edit: To be more precise, there are ways, with JavaScript, to make your own scroll bar that will work on every browser... Here, I'm showing a simple solution to make a scrolling box, with a free extra of scrolling bar styling, YMMV on that part.

  17. Hi Maxime!
    First of all, many thanks! My website looks exactly as I want right now, thanks to your code. But as Daniel Ziener, I would like the scroll to work only on desktop or tablet devices and not on mobile. I tried the code you mentioned and added it to the custom CSS area, but it didn't work for me.
    If that can help, my default content width is 1450px.
    Could you help me with this issue, please? Thank you again, and thank you in advance for your help.

    1. Hey Eva!

      The code I gave Daniel was to replace the code provided above, not in addition to it.

      In short, whatever code you have now, you need to wrap it in this media query:

      @media (min-width:768px){

      Your CSS here

      }

      Hopefully that's more clear! Cheers!

      1. Wow, Maxime!
        You're a king! It works perfectly! Thank you a million times!

  19. This scrolling text box was just what I needed for my website. I use it for variable products color variation swatches. Maxime was very helpful to modify the code for me so it would look exactly how I wanted. Thank you!

  21. It not working form me, I have section with slider and below section with other widgets, I want the second section to slide on top the section with the slider.
    How do I set it up?

  22. It did create the scroll box, but now as I scroll down the website, it breaks out of it's column and the text scrolls down the entire page. Fix for this?

  23. Bro thank you, you just save my life bro do you have any course so i can learn from it please share and if you have not made any course please make it. thanks again

    1. As you can see the scrollbar is seen, but i cant scroll with mouse, only if i click on scrollbar, but on elementor i works normally

      1. I don't know. Your setup on that page is very complex, lots of JavaScript and scroll jacking going on.

        My tutorial is meant for a normal Elementor page... It works everywhere, unless you have something interfering with it. I can't support these cases... it's up to you to simplify your setup and remove what keeps this from working as it should.

      1. You should mention that in the article. I was laughing because I was confused why you were instructing to add custom CSS to the free version when that's not possible by default

  29. Thanks,
    Great feature to add to the site!
    It works on a desktop. But How can we make this also responsive on tablets and Mobile?
    Regards

  32. Has anyone tried using this scroll technique and link to an anchor link within the section? I haven't been able to get it to work.

    1. Hey Mike!

      Indeed that won't work. With Elementor, the anchor scrolling is managed by JavaScript from Elementor, and it doesn't account for scrolling within scrolling containers.

Leave a Reply