Hello 👋

Describe the bug

On last version 3.2.5.

When smooth="true" , depending on the resize : bigger or smaller body will not adapt to the js-scroll container creating a white space under the page or cropping the footer.

We've tried to force the resize to update the container with scroll.update(). We also copied the style from your demo (html, body & scroll container) without any good result.

To Reproduce

You can see our issue here

Expected behavior

Basically the same behavior as when smooth = "false";

Desktop:

• Tested in Windows and OS
• Chrome, Mozilla & Safari latest version.

We love LS thanks in advance for your help 👊

Hello. How to use this plugin with barba.js? Is it correct way?

const scroll = new LocomotiveScroll({
	el: document.querySelector('[data-scroll-container]'),
	smooth: true,
	getSpeed: true,
	getDirection: true
});
// tell Barba to use the prefetch module
//barba.use(barbaPrefetch);
barba.hooks.afterEnter((data) => {
	scroll.init();
});
barba.hooks.afterLeave((data) => {
	scroll.destroy();
}); 

Hello 👋

Describe the bug Features aren't working on mobile. :'(

To Reproduce Steps to reproduce the behavior:

1. Go to 'fix-me'
2. Open it in Mobile
3. Scroll down to
4. See error

Expected behavior The features I've used aren't working like data-scroll data-scroll-direction data-scroll-speed. the strange things is that everything is stopped.

Screenshots

https://user-images.githubusercontent.com/54703305/128642272-09c6e4f9-b8cd-444f-88fa-49919bdf8f26.mp4

have to work like this

https://user-images.githubusercontent.com/54703305/128642377-426c7925-3787-4925-a887-70c6992cca56.mov

Desktop (please complete the following information):

• OS: MacOs Big sur
• Browser: chrome
• Version: latest

Smartphone (please complete the following information):

• Device: Realme C3
• OS: Android
• Browser: Chrome
• Version: Latest

Thank you 👊

We are using Locomotive Scroll (LS) on a site that utilizes a page transition plugin. When we transition to a new page sometime LS doesn't allow the user to scroll all the way down. I'm guessing this has something to do with the page not fully loaded when LS is initialized. From what I can tell, the Locomotive site is similar. How do you all get around this obstacle. Any insights would be highly appreciated!

Hello 👋

Describe the bug When I refresh the page most of the time the current position is calculated as top of the page. To make it clear. If I scrolled down to half of the page and refresh it then the top of the page will be at the half of the page. I cannot scroll up but I can scroll down having blank section.

To Reproduce Here is my very basic structure

<div id="loco-scroll"> <div class="one vertical red" data-scroll data-scroll-speed="0" data-scroll-direction="vertical" ></div> <div class="two horizontal green" data-scroll data-scroll-speed="4" data-scroll-direction="horizontal" ></div> <div class="three horizontal blue" data-scroll data-scroll-speed="2" data-scroll-direction="horizontal" ></div> <div class="four horizontal yellow" data-scroll data-scroll-speed="2" data-scroll-direction="horizontal" ></div> <div class="five vertical orange" data-scroll data-scroll-speed="2" data-scroll-direction="vertical" ></div> </div> <script src="js/locomotive-scroll.js"></script> <script> const scroll = new LocomotiveScroll({ el: document.querySelector('#loco-scroll'), smooth: true, }); </script>

stylesheet `#loco-scroll div { width: 100vw; height: 100vh; }

.red { background-color: red; } .green { background-color: green; } .blue { background-color: blue; } .yellow { background-color: yellow; } .orange { background-color: orange; }`

Expected behavior Jump to top of the page

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS Catalin v10.15.2
• Browser same thing happens in Safari, Firefox, Chrome
• Version latest

Thank you 👊

Laszlo

Hi, awesome plugin. One of the issues I've found is that the thumb height of '.c-scrollbar_thumb' is not updated on window resizes. It happens on the test site as well. I don't know if it's related, but the positions of the elements are not updated as well when resizing the window, only after you do a manual scroll. I tried calling scroll.update(), on a window resize listener, but it didn't work.

How do I get everything updated after resizing the window? Thanks!

Hello 👋

Describe the bug You can't scroll when your mouse is over an iframe

To Reproduce Steps to reproduce the behavior:

1. Embed a youtube iframe
2. Try to scroll when your mouse is over it

Expected behavior You should be able to scroll even if your mouse is over an iframe

Desktop (please complete the following information): MacOS 10.15.7 with Chrome Version 87.0.4280.88 (Build officiel) (x86_64)

Thank you 👊

Hi there,

First of all, awesome stuff, I love it. I just found a little bug that is pretty annoying. When an element is set to sticky, if you scroll past it's wrapper and then you resize your browser, it's positioning gets all funky and it starts to stay sticked beyond it's wrapper dimensions. The bug is present on your demo page too. Scroll past the 04 Fixed elements section then open the console (or just resize your browser) and you'll see what I mean.

Thank you!

Hi,

I need the horizontal scroll for a specific page and I tried to change the direction option to "horizontal" without any effect.

Could you give me some hints to have the horizontal scroll, like you did for this website?

https://homesociete.ca/

Thanks!

Describe the bug Page height is incorrectly measured by LS and so the scroll ends too early or a bit after the content ends. On deeper inspection, it seems that the limit on the scroll instance gets an incorrect value on initializing. I've tried fixing this by adding an update() call after a timeout to no avail.

To Reproduce Steps to reproduce the behavior:

1. Setup locomotive scroll on Gatsby
2. Add content to page and scroll

I'll attempt to provide a demo reproducing the error later, but if anyone has a CodeSandbox to show the issue that'd be great (cc @flowen)

Expected behavior The scroll should happen till page end not before or after: technically the right value set to limit

Desktop (please complete the following information):

• OS: MacOS Catalina
• Browser: Chrome
• Version 80

Hello! I have problem with height of scroll container. I used also scrollTrigger and BarbaJS, but I think is a Smoothscroll problem.

barba.hooks.after(() => {
    scroll.update();
  });

Do not solve my problem, because also without BarbaJs the footer and other content will cutted off.

For an old project I used this:

function locomotiveHeightBug(){
  scroll.update();
}
setInterval(locomotiveHeightBug, 5000);

It solve the problem but after 5 seconds, but sometimes the scroll jump. That's so bad. Without that bad trick, when I refresh the page for the first time, and than resize the viewport, magically the scroll container give me the exact height.

Someone have the same problem? How to fix it? Thanks.

Hello 👋

We have two horizontal scroll in the same page. The probleme is that when we scroll in a mobile the second scroll crash (the first one come over the second).

` const scroller = document.querySelector('#scroller');

      const locoScroll = new LocomotiveScroll({
        el: scroller,
        smooth: true,
        mobile: {
          smooth: true,
        },
        tablet: { 
          smooth: true,
        }
      });

      ScrollTrigger.scrollerProxy(scroller, {
        scrollTop(value) {
          return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
        }, 
        getBoundingClientRect() {
          return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
        },
        // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
        pinType: scroller.style.transform ? "transform" : "fixed"
      });
      
      ScrollTrigger.defaults({
        scroller: scroller
      })
      const horizontalSections = gsap.utils.toArray('section.horizontal')`

`horizontalSections.forEach(function (sec, i) {

var thisPinWrap = sec.querySelector('.pin-wrap'); var thisAnimWrap = thisPinWrap.querySelector('.animation-wrap');

var getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth);

gsap.fromTo(thisAnimWrap, { x: () => thisAnimWrap.classList.contains('to-right') ? 0 : getToValue() }, { x: () => thisAnimWrap.classList.contains('to-right') ? getToValue() : 0, ease: "none", scrollTrigger: {
trigger: sec,
scroller: scroller, start: "top top", end: () => "+=" + (thisAnimWrap.scrollWidth - window.innerWidth), pin: thisPinWrap, invalidateOnRefresh: true, anticipatePin: 1, scrub: true, //markers: true } });

}); ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.refresh(); `

Thank you 👊

Hello 👋

After scrolling the pages to the bottom, there is an empty space. When I restart the site, the bottom always changes, then there is an empty space, then the footer disappears

I need that there is no empty space at the bottom of the site. Style file included locally

• OS: Windows 10
• Browser e.g
• Version [e.g. 108.0.1462.54]

Thank you 👊

Hello 👋

I am having a very weird issue and was wondering if anyone has come across something similar. I know a lot of people use horizonal scroll sections with Locomotive + GSAP so I am asking here.

Issue: I have a horizontal scroll section that works amazing on desktop, but when I try on mobile or tablet devices the moment the scroll finishes, it gets pulled back to the top. It basically resets the scroll to 0 (The top).

Here is the code pen with the exact code: (The issue wont happen on mobile inside the codepen, youll have to visit my website) https://codepen.io/cassie-codes/pen/ZEeeyOX/7663b55b05f5d473c0e61732fb9174b4

Here is the issue on my live server so you can see the behavior: https://shanefry.com/test

https://user-images.githubusercontent.com/118708070/209584653-a1829480-e54e-4783-993e-f5954fae5190.mp4

Hello 👋

Describe the bug

I am using locomotivescroll on a couple of websites and I really like the smooth scroll effect. However, I have noticed that, when setting the lerp instance option to anything above the default 0.1, scrolling with the mouse wheel feels choppy. Effectively, the root cause of this issue is that the transform: matrix3d() b4 value stops as soon as the mousewheel does. This is particularly visible when setting lerp: 0.8 and using the mousewheel to scroll up and down, on both Windows and MacOS.

To Reproduce

A simple, reproducible example of the issue can be found here https://github.com/developedbygeo/locomotive-issue . Feel free to fork the repository to try it out.

Expected behavior For the scroll to be relatively smooth, based on the lerp, and not choppy. The issue disappears when reverting to the default lerp value or when using a trackpad with the same lerp value.

Desktop (please complete the following information):

• OS: MacOS Monterey 12.5, Win10
• Browser: Chrome, Firefox

Thank you in advance!

Hi guys,

Describe the bug One page load, the very first section that is seen, above the fold, does not seem to respect the delay attribute. Elements fade in immediately instead of being delayed. I notice that the 'in-view' class is added immediately. Is there a way to delay this?

I hope this is clear enough.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.