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.
#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

			});
		});
	}
 }

}`

[h0pers]

Hello everyone I hope you all doing well!

I have got the same issue and the fastest decision I came up is represented below.

 const scroll = new LocomotiveScroll({
          el: document.querySelector('.wrapper'),
          smooth: true,
  });
  
  const overflowBlock $('.work__filter')  

  $(overflowBlock).mouseenter(function () {
    scroll.stop();
  })
  
  $(overflowBlock).mouseleave(function () {
    scroll.start();
  })

We are adding trigger when mouse enter the needed block and disabling locomative scroll using
LocomotiveScroll.stop();

Then resuming scroll when mouse leaving the needed block adding mouseleave trigger.
LocomotiveScroll.start();

My code using jQuery, but it easily can be rewritten to pure JavaScript if needed.
Thank you!

[iamluxan]

You just need to add "data-lenis-prevent" to your html tag to disable Lenis / Loco

eg:
<div class="work__filter" data-lenis-prevent>...</div>