Is it possible to specify the scroll container?

[mtskf]

Hi there, thanks for the awesome script!
I'm just wondering if we could apply lax only inside a scrollable div elements.
I'd appreciate if you could advise! Thanks :)

[alexfoxy]

Hey - glad you like it :)

How many elements do you have? If you only have one you can bind to the scroll events from that window e.g:

window.onload = function() {
	lax.setup() // init
        const el = document.getElementById("scrollableDiv") // Find your scrollable element
 
	const updateLax = () => {
		lax.update(el.scrollTop) // pass in the elements scrolled position
		window.requestAnimationFrame(updateLax)
	}

	window.requestAnimationFrame(updateLax)
}

Hope that helps!

[mtskf]

Thanks @alexfoxy , you are champion!

[Meidanmor]

I can't make it work :/
can you please help me?
This is what I tried :

window.onload = function () {
    lax.init()
        const el = document.querySelector(".parallax") // Find your scrollable element
	const updateLax = () => {
		lax.update(el.scrollTop) // pass in the elements scrolled position
		window.requestAnimationFrame(updateLax)
	}
	window.requestAnimationFrame(updateLax)
    // Add a driver that we use to control our animations
      lax.addDriver(
        "scrollY",
        function () {
          return document.documentElement.scrollTop;
        },
        { frameStep: 1 }
      );
  }

What am I doing wrong?

[arthurdenner]

@Meidanmor, sorry if I misunderstood what you're trying to achieve, I'm not 100% up-to-date with lax but:

• Shouldn't the value for the scrollY driver be el.scrollTop instead of the document?
• It seems like lax.update is not a function anymore, I'm not sure if there's a replacement for it.

[Meidanmor]

@arthurdenner Thank you!
You are clearly right , I just needed to change the document within the driver
return document.documentElement.scrollTop;
to
return el.scrollTop;

full code:

window.onload = function () {
    lax.init()
   const el = document.querySelector(".parallax") // Find your scrollable element
 
    // Add a driver that we use to control our animations
      lax.addDriver(
        "scrollY",
        function () {
          return el.scrollTop;
        },
        { frameStep: 1 }
      );
}