I have a problem when my page is long with many <img loading="lazy"> + some css animations (like AOS JS) revealing on scroll.
So if I want to use element.scrollIntoView() then the page scrolls to a position that's upper than required element. I guess it's because of loading="lazy" and perhaps due to css animations on scroll.
I tried to get position Y of my element but it always changes as I scroll the page until that element.
Is it possible to fix it? Thanks in advance!
Yes, AOS.JS is actually moving the element in a different position when it's not revealed.
I've encountered this once and I've did a quick-hack (don't take this as a best-practise) - I've created another invisible element (which didn't have the lazy and AOS effects) on the position where the revealed element should be and then I scrolled onto the invisible element.
Related
My goal is to create an absolutely positioned div as the background of the website and the parent of the ScrollMagic scene. By doing this, the title and other content can appear above the scrolling/animated background. However, I found that when using ScrollMagic on a div with absolute positioning, the scroll behavior only works when indicators are added using the addIndicators plugin.
Here is an example:
https://codesandbox.io/s/elegant-sound-x3gop?file=/index.html (without indicators, no scrolling)
https://codesandbox.io/s/ancient-https-iop96?file=/index.html (indicators added, has scrolling)
Is there any way to fix this problem and use the absolutely positioned div as the background without having to add indicators? Or if this is not possible, is there any other way to achieve the same effect where the title appears above the scrolling/animated background? I previously tried making the title absolutely positioned instead, but this did not work because I also wanted to have more content further down the page that would also appear above the background, but it was hard to format with absolute positioning on the content instead of the background.
I'm trying to achieve the fullPage.js scrolling effect inside of a container element.
The best way to describe it is kind of embedding another page inside the viewport and apply fullPage.js to it only.
In the picture below you can see the viewport background color is actually grey-ish while the container object is white. So the actual viewport should be static, non-moving, while the container should be the real scrollable page.
I know this should be possible by vertically stacking up div's the same size as the container, setting overflow to hidden and then emulating a scroll effect using JS manually. However as fullPage.js is pretty reliable and featured I'd like to know if there's a little hack for this so I can save myself from all this work.
Kind regards :)
Image of what I'm trying to achieve
EDIT
Solved using the mousewheel event, an overflow-hidden inner container and GSAP. Turned out to be pretty simple actually :) Could need some tweaking with the y-Delta value to have more page switch scrolling threshold
Demo: https://jsfiddle.net/bva8g3u9/
I have a page where an image is decreased in size while scrolling. Once it reaches a specific size another image appears. From there on the scroll behavior should be the same as in scrollytelling approaches.
My problem right now is that all the subsequent div's are not "waiting" for this event of image change. I can only tell the first subsequent div to stop until this event occurs and change its position to relative once it occurs. But with this solution, it seems to be more messed up.
Here is a JSFiddle with a sample setup. I would like that none of the text div's move until the red div appears. And then it should start moving from its current position.
I could solve the issue myself (in some way).
I added a container div to all content after the div with the images and made its opacity: hidden. While scrolling, the content is actually scrolling upwards, but it cannot be seen. Once the images change I add a margin-top to the content container with the value of the scrolled distance (+ some buffer) and remove the opacity: hidden class.
Here is a JSFiddle
However, this is not the solution described in the question, where the content should be visible and "wait" at its position, but for my circumstances, it is an acceptable answer. But I will not make this the accepted answer of my question.
I'm using the wow.js framework based on JQuery Animate on this site I just completed: (http://adrenalinetv.com/). Problem is I noticed on the animations I have that slide up, the animated element slides above the div underneath the element I'm sliding. So you see the element in the next div or div's. So I thought, OK...I'll just make the z-index of that div higher and my problem will be gone. However, no matter what z-index I set that div, the animated element always appears on top of it as it slides into place. I'm not sure if that's because of the wow javascript, the animate.css or script or what. Anyone familiar with this framework know how to correct this? Or is it correctable?
The element that you are giving a z-index cannot have a position static. So give it a position relative and the z-index fix should work.
From CSS-tricks (http://css-tricks.com/almanac/properties/z/z-index/)
As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default).
I have a div as a container for a file view. This div has scrolling in y direction.
I want to automatically scroll the content inside this container div to a specific position when loading the page, but without to scroll the whole page. I have tried with <a name="scrollHere"> and location.hash = 'scrollHere'; but this scrolls the whole page.
Do you have any ideas?
Use scrollTop on the container element with a value calculated from the y position of the element inside the container.
Mozilla Element.scrollTop
stackoverflow: javascript-textarea-scrolltop
Using scrollTop requires that you know the position you are going to, and it could change as content changes. A possible solution is to add an anchor tag and call focus on it when the page loads, the browser takes care of scrolling it for you.
If you use Ext, you can use Element.scrollIntoView. otherwise, you can look at their source code for inspiration on how to do implement scrollIntoView.
http://www.extjs.com/deploy/dev/docs/source/Element.scroll-more.html#method-Ext.Element-scrollIntoView