Is it Possible to control a Scroller without "Scrolling"

[soupking]

Hi Fellow Greensocks,

 

I have a situation where I have a responsive rich media unit that inadvertently pushes the page down with the unit staying at the top (above and out of sight), so you have to scroll back up to see it. It didn't always do that and it only happens in Chrome (Desktop). It's older and I think Chrome updated their DOM model somehow. Now my sample is funky (Must view in Chrome-Desktop for issue):

 

http://axiom-media.com/__portfolio/_rwd/02/mobile.html

 

Again, sorry for no CodePen. This issue is housed in a rather complex Page/Div framework that generates a DIV dynamically. In addition to that it's controlled (I think) by a very lengthy minimized JS. Even when unminified it looks like Harvard Calculus. There just isn't a way for me to replicate this challenge in a vacuum.

 

So, that being the case, I'm getting out cigarettes and duct tape thinking...Create a document condition (if browser == Chrome, then..) Make the scroller move persistently back up inversely against the pushdown motion until complete. As it doesn't happen in subsequent user initiations, only onLoad.

 

So I guess, bottom line, my question is there any way to scroll a page dynamically with GSAP code, without physical scrolling, so I can counteract what the page is doing on load? I can't find a way to kill the scrolling motion with overflow:hidden as the DOM structure is pretty thick and generated dynamically. So if I can't stop it, I figure I might be able to force it back with scrolling properties of some kind.

 

If anybody can suggest anything or has any questions, I'm all ears. As always, thanks for reading.

 

 

 

[GreenSock]

Looks like you've got an iframe inside an iframe inside an iframe (or something like that). Not that it's "wrong" or anything. And z-index on stuff is set to 2147483647 which I find rather interesting. 

 

I don't have time to dig into all the code (there's a LOT of it), but it sounds like you need to talk to whoever is controlling that top-most page. Ads probably won't be allowed to reach out of their iframe and programmatically scroll the parent(s). That'd be a security issue. So even though GSAP's ScrollToPlugin can indeed scroll a page easily, I'm not sure it's realistic here. 

 

If I were you, I'd share my concerns with the controller of that top-level page and iron things out properly rather than doing a hacky duct-tape "fix", because it may get weird if they eventually fix their JS and then suddenly in Chrome your ad scrolls the whole page down too far. See what I mean? 

[soupking]

Yeah, I've been looking at it from a number of angles the past few days and I'm...Heh, it's about a ghostly as referencing Xpath data in a Flash site.

 

I don't have the ability to contact the engineer who put the framework together so I've got to find a way to make this one stick without saying, "please scroll up to view". Given the nature of it's DIV complexity and dynamic nature of using JQuery or whatever to generate the main ut_container DIV on the fly which is wrapped up in JS file that amounts to sawdust. I'm going to have to resort to a band-aid or potentially a video demo. It works on everything else thought so it'd be a pity to not just show the unit as-is. However, it's a pretty complex little unit.

 

The main files are:

http://axiom-media.com/__portfolio/_rwd/02/mobile.html

and:

http://axiom-media.com/__portfolio/_rwd/02/creative/index.html

 

They pretty much behave as the iFrame container file and the index for the ad build/animation etc.

 

I really think it's too complex to solve without the source creator, but if there's a script that can tell the scrollbar to "hey, keep sliding up!", that'd be my easiest fix.

 

Thanks for reading, Jack.

[Acccent]

Maybe you could make that whole div at the top position:absolute, then monitor its clientHeight and use that to increase the height of a position:relative div underneath it (or just increase the top margin of your content, like in the pen below)?

 

(Also, did you try just using scrollTo to stay at the top until the add has finished loading, or the user initiated scrolling?)

 

See the Pen VQMMvz?editors=0010 by Acccent (@Acccent) on CodePen