No aos scroll effect when screen is very large items not visible when page openend

[hocomadvies]

I have aos working fine on normal and mobile screen size. But when a page is opened on a (very) large screen, the page will in that case not scroll and the aos items are not revealed. So the page shows a big white space and is not attractive to scroll further. How to get in this case (on larger screens) the aos items to reveal when page opens (loads)?

I use aos version 2.3.4.

[hocomadvies]

For now I have found a solution that seems to work. using on. load instead of on .scroll But I am not sure how this will turn out site width. My first thought was having an @media query for it. But could not figure out how to get that applied.

$(window).on("load", function () { AOS.init(); });

//$(window).on("scroll", function () { // AOS.init(); // });

[hocomadvies]

Ok, this works but might have created an other problem. On other pages the items, with aos applied do not appear at all. Only after changing the page size a bit. Than they load as expected. So what is happening here?

[hocomadvies]

Could I have depending on a @media the AOS.init query loading different functions? So when very large screen I want on- load and when smaller screens I want to have on-scroll ? Any ideas for this? Thanks.

[hocomadvies]

Would this work?

//AOS on-load or on-scroll depending on viewport large screen (min-width: 1900px)

// Create a media condition that targets viewports at least 1900px wide
const mediaQuery = window.matchMedia('(min-width: 1900px)')
// Check if the media query is true
if (mediaQuery.matches) {
  // Then trigger an alert
  alert('Media Query Matched!’);
  $(window).on("load", function () {
AOS.init();
});
}

[hocomadvies]

This seems to work.

//AOS on-load or on-scroll depending on viewport large screen (min-width: 1900px)
const mediaQuery = window.matchMedia('(min-width: 1900px)')
// Check if the media query is true
if (mediaQuery.matches) {
    // Then trigger an action
    //alert('Media Query Matched!’);
    $(window).on("load", function() { AOS.init(); })
		}
      else 
        {
	 $(window).on("scroll", function() { AOS.init(); })       
        }

//////  

[hocomadvies]

Well still seems to give problems in Firefox. Parts of the page are not activated (loaded). Any ideas how to get this better working? Thanks. on-scroll works for small screens fine. Bit for large screens not since the page loads before any scroll and than parts are still hidden. When having on-load for large screens. Some pages will have all AOS items displayed. But some, when scrolling down have the items (hidden) and only changing the page size will make them appear. What will work good for both large screens and smaller screens? (or maybe some addition to my js code?). Thanks

[todaywithsam]

I am seeing the same issue on Firefox. Only about halt the page loads. It works fine in Chrome.