Add "container" setting, to allow attaching AOS to any scrollable element

[Teksetta]

I'm guessing that your script (which is amazing by the way) is only targeting the entire browser window, the ''. Is there a way to target a specific selector such as a modal or a div within another div?

[HuwJanus]

Agreed - I like to be able to target a specific DIV element to use rather than the document BODY element. I often use sleeve DIV's rather than the body element itself so this would be very helpful.

[makis-spy]

mee three

[7ender13]

+1

[eladonline]

join the request

[erickmartim]

Here's a pen with what I believe to be a similar problem: https://codepen.io/erickmartim/full/XBXBXr/

in this case, the .wrapper div is the one responsible for the scrolling. There's a second header scrolling down the page, but it doesn't show up. If you resize the window though, while the page is focused on that area, it will then appear. AOS also seems to work properly if I remove the fixed height on the .wrapper element, but then it'll break the page layout. I'd love to see a solution for this so I can use this parallax technique I came across and AOS together on my designs.

Thank you for this amazing library by the way, Michal!

[MarioPerini]

+1

[MarioPerini]

I fixed it with a little hack in my project $('#YourWrapper').scroll(function () { AOS.refresh(); })

https://codepen.io/anon/pen/aaYWNK/

[erickmartim]

@MarioPerini thanks for your suggestion! I updated my pen with it and it works now as expected.

There were no side effects on my tablet but I have to wonder though how heavy it must be to attach that function to the scroll event. That pen is lightweight, but on a busier environment, javascript wise, calling that function so often can take its toll. There has to be a better solution for that.

[Teksetta]

@erickmartim You'll want to put a debounce on it that helped with my solution.

[erickmartim]

@erickmartim You'll want to put a debounce on it that helped with my solution.

Can you clarify what "debouncing" means, please, @Teksetta ?

[Teksetta]

Sure thing @erickmartim

Debounce is a means to prevent a function from being executed over and over to the point where it hurts performance. e.g. You have an autosuggest input setup; rather than hit the server with each new character typed, you wait till the user has essentially made an effort to pause in their typing. This means you would make fewer calls to the server to get results. The same logic could be applied to the scroll setup.

There are two great JS libraries to help you with a debounce: Lodash and Underscore.js. It's a personal preference thing which one you go with.

[MarioPerini]

Im totally agree Performance can be an issue. This is why i called it "little Hack" it should not represent a out of the box Solution.

[mromrell]

I wasn't able to get @MarioPerini's little Hack to work. Is there a built in solution for this yet? Otherwise +1

[MarioPerini]

I wasn't able to get @MarioPerini's little Hack to work. Is there a built in solution for this yet? Otherwise +1

may i can help you? can you provide a link?

[derbli]

+1

[IssueHuntBot]

@issuehuntfest has funded $8.00 to this issue. See it on IssueHunt

[Neijin]

Hi everyone !

There is a fork of this project that allows you to do exactly that : check out Anthony Paparella repo.

How does it work ? You just have to add a scrollContainer: '#myScrollContainer' option in your AOS.Init() and everything should work as usual, but only in your selected scroll container.

Have a great day.

[geoffreyrichey]

Any plans to integrate this into the current project?

[dnspnjrs]

Yes, would also love this feature.

[nikme]

For any soul wandering how to integrate AOS with custom scroll, like react-custom-scrollbars lib.

In React I have

<Scrollbars onUpdate={handleUpdate} autoHeight={true} autoHeightMin="100vh">
...
<div data-aos="fade-right" data-aos-anchor-placement="center-center">
</div>
...
</Scrollbars>

As an outer scrollable layer,

and it calls

 const   handleUpdate  = (values) => {
    AOS.refresh();
  };

Thanks @MarioPerini for solution

[NicolasM99]

I fixed it with a little hack in my project $('#YourWrapper').scroll(function () { AOS.refresh(); })

https://codepen.io/anon/pen/aaYWNK/

Thanks @MarioPerini and @nikme ! I solved this by also attaching the AOS.refresh(); function to the onScroll event for my scrollable container in React:

<div
 id="body-container"
 onScroll={() => AOS.refresh()}
...
>
...
</div>