Sidebar scrolling doesn't work

[mrspence]

Sup! 🤘 Thanks for such an amazing library!

Describe the bug Sidebar scrolling doesn't work when used inside a locomotive scroll (i.e. the webpage already has locomotive scrolling and you want to use it on a smaller sidebar too that sits within).

Another name for what I'm stuck on might be nested locomotive scrolling 🙌

To Reproduce Steps to reproduce the behaviour:

1. Create a webpage and add locomotive scrolling to the highest order element
2. Inside, create two columns that extend beyond the height of the screen
3. Put a max height on one of the columns and enable overflow-y. With your chosen column, also add children elements that overflow.
4. Start scrolling - you will see when we scroll on the chosen column, the whole webpage scrolls too (it combines the scrolling).

Expected behaviour Scrolling should not bubble up... perhaps behind a flag.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 87.0.4280.66 (Official Build) (64-bit)

Thank you 🎩

[dithom]

I just had the same issue with a scrollable <textarea> element. I managed to get it working by using:

document.querySelector('#my-textarea')?.addEventListener('mousewheel', (event) => {
    event.stopPropagation();
});

This way the mousewheel event will not bubble up to your scroll container. Hope it helps!

Edit: I guess it could be implemented as a feature using something like this in conjunction with a data-scrollable attribute:

const scrollableElements = document.querySelectorAll('[data-scrollable]');

scrollableElements.forEach((element) => {
    element.addEventListener('touchmove', (event) => {
        event.stopPropagation();
    });

    element.addEventListener('mousewheel', (event) => {
        event.stopPropagation();
    });
});

[presiyan-peev]

@mrspence Hi mate, How did you achieve nesting? Since Loco is transforming the element on the y-axis, I thought this was impossible. I can't get it working

[mrspence]

@mrspence Hi mate, How did you achieve nesting? Since Loco is transforming the element on the y-axis, I thought this was impossible. I can't get it working

Unfortunately not - I believe we ended up switching away due to accessibility concerns for that particular project. This was 3 years ago though, so my memory is hazy 😅

Have you tried @dithom 's fix?

[presiyan-peev]

@mrspence My problem is that I cannot add Locomotive Scroll to a DOM Element and make it work properly. If I add the scrollbar to the body tag - it works. But when I add it to an element, doesn't work. https://codesandbox.io/p/sandbox/hello-vue-locomotive-ksn24j?file=%2Fstyles.css https://codesandbox.io/p/sandbox/locomotive-scroll-in-react-forked-8vyypl?file=%2Fsrc%2Fstyles.css%3A19%2C26

The behavior looks kind of indeterministic since in my local project at least a scrollbar appears sometimes, however it doesn't move - only the content moves :D

[presiyan-peev]

I found that it is this the problem: .has-scroll-smooth [data-scroll-container] { min-height: 100vh; } with my HTML div class="wrapper" style="height: 500px"> div class="scroll" ref="scrollRef" :id="scroll-${$.uid}" data-scroll-container> div data-scroll>

  /div>
/div>

/div>

and JS const scroll = new LocomotiveScroll({ el: document.getElementById(scroll-${this.$.uid}), scrollbarContainer: document.getElementById(scroll-${this.$.uid}), smooth: true, });

If my screen is 950px, then .scroll has height of 950px and when the content in "data-scroll" is larger than 950px, everything looks fine. But if the content of "data-scroll" is 700px (which is my case) then I have 250px of empty space. If I add .scroll {min-height: auto !important;} then the 250px disappear and it would work perfect, but it receives from loco this element style: transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, **409**, 0, 1); So it moves the element downwards and messes everything up. When I leave min-height > 100vh, then transform has value of matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, **0**, 0, 1)

So - the question is why does the element transforms downwards?