Scrolling within "overflow: auto" area. Locomotive still scrolls.

[seansmyth]

Hello 👋

I'm creating a horizontal layout and one of the "data-scroll-section' sections has some text. This text could potentially be long and become higher than 100vh. I want to be able to scroll within this area to read the rest of the content.

At the moment, the horizontal scroll kicks in as well so I'm not able to read all the content.

I've like to NOT trigger Locomotive scroll while scrolling within that area only.

Any ideas?

Thank you 👊

[iamluxan]

Hello, I’m in the same situation: I can’t disable Locomotive Scroll on the page, except within a div that has overflow: auto. Have you found any information about this?

I found a discussion on the topic, but I still can’t manage to stop Locomotive Scroll. https://github.com/locomotivemtl/locomotive-scroll/issues/193

Scroll.js ` import { module } from 'modujs' import { lazyLoadImage } from '../utils/image' import LocomotiveScroll from 'locomotive-scroll' import {$html} from "../utils/dom.js"; export default class extends module { constructor(m) { super(m); }

init() {
    this.scroll = new LocomotiveScroll({
        lenisOptions: {},
        modularInstance: this,
        scrollCallback(scrollValues) {

            if (scrollValues.direction == 1) {
                $html.classList.remove("scrolling-up")
                $html.classList.add("scrolling-down")
            } else {
                $html.classList.remove("scrolling-down")
                $html.classList.add("scrolling-up")
            }

            if ((scrollValues.scroll > scrollValues.progress) && (scrollValues.scroll > 50)) {
                $html.classList.add("has-scrolled")
            } else {
                $html.classList.remove("has-scrolled");
            }
        },
    })`

Contact.js (module where I wan to stop locomotive scroll)

` import {module} from "modujs"; import {$html} from "../utils/dom.js";

export default class extends module { constructor(m) { super(m);

}

 init() {
    let $contactButtons = document.querySelectorAll('[data-button="contact"]');
    let $contactDoor = document.getElementById('contact-door');

    if ($contactButtons) {
        $contactButtons.forEach(function ($btn) {
            $btn.addEventListener('click', function(e) {
                e.preventDefault();

                // Todo : Stop Locomotive Scroll

            });
        });
    }
 }

}`