How to Custom Scroll in Lightning Components?

In Salesforce Lightning, I am trying to implement custom scroll functionality inside a ui:inputTextArea component. I wanted to use the jQuery nicescroll plugin to add a “nice scroll” effect. My approach was to access the textarea element using its aura:id like this:

var textareaElem = component.find("editModeScrollBarY").getElement();
$(textareaElem).niceScroll();

var textareaElem = component.find("editModeScrollBarY").getElement();
$(textareaElem).niceScroll();

However, this approach fails when Locker Service is active, producing the following error:

component.find(...).getElement is not a function

component.find(...).getElement is not a function

The reason for this error is that Locker Service enforces strict namespace and DOM encapsulation rules. Since ui:inputTextArea is part of the Salesforce namespace and not my custom namespace, direct DOM access is blocked for security reasons. This is why getElement() cannot be called on components outside your namespace.

Additionally, other options like <ui:scrollerWrapper> are not suitable for dynamic scrolling needs, and lightning:textarea does not automatically implement scroll behavior when the content exceeds its height.

Solution Approaches

1. Use lightning:textarea with CSS overflow

The simplest way to implement scroll functionality without Locker Service violations is by using the native lightning:textarea component and controlling its scroll using CSS. For example:

<lightning:textarea 
    label="Description" 
    value="{!v.textValue}" 
    class="custom-scroll-textarea" />

<lightning:textarea 
    label="Description" 
    value="{!v.textValue}" 
    class="custom-scroll-textarea" />

.THIS .custom-scroll-textarea textarea {
    max-height: 150px; /* set desired height */
    overflow-y: auto;  /* enable vertical scroll */
    resize: vertical;  /* optional: allow user resizing */
}

.THIS .custom-scroll-textarea textarea {
    max-height: 150px; /* set desired height */
    overflow-y: auto;  /* enable vertical scroll */
    resize: vertical;  /* optional: allow user resizing */
}

Here, the overflow-y: auto ensures that the textarea becomes scrollable when content exceeds its height. This is fully compatible with Locker Service since it uses only your component’s CSS and doesn’t access other namespaces’ DOM elements.

2. Use a Custom LWC Wrapper with Shadow DOM Styling

Since ui:* components are legacy Aura components, moving to Lightning Web Components (LWC) gives more flexibility. In LWC, you can wrap a textarea and apply custom scroll plugins safely:

<template>
    <div class="scroll-wrapper">
        <textarea class="custom-scroll" value={textValue} oninput={handleInput}></textarea>
    </div>
</template>

<template>
    <div class="scroll-wrapper">
        <textarea class="custom-scroll" value={textValue} oninput={handleInput}></textarea>
    </div>
</template>

import { LightningElement, track } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import NICE_SCROLL from '@salesforce/resourceUrl/nicescroll';

export default class CustomScrollTextarea extends LightningElement {
    @track textValue = '';

    renderedCallback() {
        if (!this.niceScrollInitialized) {
            loadScript(this, NICE_SCROLL)
                .then(() => {
                    const textarea = this.template.querySelector('.custom-scroll');
                    $(textarea).niceScroll(); // Initialize plugin
                    this.niceScrollInitialized = true;
                })
                .catch(error => console.error(error));
        }
    }

    handleInput(event) {
        this.textValue = event.target.value;
    }
}

import { LightningElement, track } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import NICE_SCROLL from '@salesforce/resourceUrl/nicescroll';

export default class CustomScrollTextarea extends LightningElement {
    @track textValue = '';

    renderedCallback() {
        if (!this.niceScrollInitialized) {
            loadScript(this, NICE_SCROLL)
                .then(() => {
                    const textarea = this.template.querySelector('.custom-scroll');
                    $(textarea).niceScroll(); // Initialize plugin
                    this.niceScrollInitialized = true;
                })
                .catch(error => console.error(error));
        }
    }

    handleInput(event) {
        this.textValue = event.target.value;
    }
}

In this solution:

• loadScript loads the jQuery plugin safely.
• this.template.querySelector accesses elements inside your own component’s template, avoiding Locker Service violations.
• Shadow DOM encapsulation prevents any cross-namespace access, so your scroll plugin works only on elements you control.

3. Avoid direct DOM access on ui:inputTextArea

Direct access to components outside your namespace (like ui:inputTextArea) is blocked by Locker Service, so the original approach:

component.find("editModeScrollBarY").getElement();

component.find("editModeScrollBarY").getElement();

will never work when Locker Service is active. Salesforce explicitly disallows this to prevent cross-component security risks. The only safe alternatives are:

1. Use standard components (lightning:textarea) and CSS scrolling.
2. Create a custom wrapper in your own namespace (Aura or LWC) and apply the scroll plugin inside your namespace.
3. Avoid using ui:inputTextArea for custom scroll behavior entirely.

Conclusion

Locker Service enforces strict namespace encapsulation, which prevents accessing the DOM of Salesforce-managed components like ui:inputTextArea. To implement custom scroll functionality, you should either rely on CSS overflow for native scrolling or create a custom LWC/Aura wrapper where you have full DOM control. Using jQuery plugins like nicescroll is possible, but only inside your component’s namespace. Direct access to Salesforce-managed component elements is not allowed and will always fail with getElement is not a function.

Job-Oriented Salesforce Course with Real-Time Projects and Money Back Guarantee

Our Salesforce Course is designed to provide you with a deep understanding of the Salesforce platform, equipping you with the essential skills to succeed in the CRM field. The program covers important modules such as Salesforce Admin, Developer, and AI, blending theory with hands-on practice. You’ll gain practical experience through real-world projects and assignments, enabling you to solve complex business challenges using Salesforce solutions. Our expert instructors ensure that you gain both technical proficiency and relevant industry knowledge to thrive within the Salesforce ecosystem.

Beyond technical skills, our Salesforce training in Bangalore offers personalized mentorship, exam preparation, and interview coaching to enhance your career prospects. You’ll have access to comprehensive study materials, live project experience, and dedicated support throughout your learning journey. Upon completing the course, you’ll be fully prepared for certification exams and equipped with the problem-solving skills that employers seek. Start your Salesforce journey with us and unlock a world of career opportunities. Enroll for a Free Demo now!