I am building an infinite scroll component for a web page that needs to work on iPad.
So - when the user scrolls to the bottom of a list, we load more content and display an animated ajax loader image while it's loading.
I have managed to get this to work to a point by using the touchmove event to measure page scroll position and load content when required. But - when we are scrolling the page, any animated gifs (or css animated icons) stop animating (presumably to reduce load on the gpu).
I have however found a way around this - if I create an element with overflow:scroll on it, I can put all my contents in that and emply the same method of measuring position on touchmove but the animated gifs still continue to animate and I can run javascript functions in the background as well.
But - I also want the scrolling region to have the standard iOS momentum/inertia slow down after scrolling. I have managed to achieve this by applying -webkit-overflow-scrolling: touch to the scroll region.
So - to my question - when I release the scroll element and it gradually slows down, I would like to measure the position of the scrolled element as it auto slows down (if that makes sense). I can measure it as I scroll through the use of the "touchmove" event and I can measure it when the momentum comes to a halt but not during the momentum/slow-down bit.
I can run javascript loops/intervals while it is happening but it seems impossible to acually measure the scroll position of the element as it gradually slows down.
Any ideas?
Thanks
Related
I am trying to achieve an effect similar to on this website here: https://www.wokine.com/en/ where you scroll down and the 'HELLO' text moves to the side. I have done that part, but I am stuck on how to pause the page from scrolling after that but still, keep the scrollbar moving. I need this to happen so I can use jquery to re-enable scrolling after the user scrolls down to a certain point.
The link explains it a bit better than I can with words.
Page scrolling is never paused or disabled is just a "trick"
Let the 'HELLO' element be fixed positioned until scrolling reach the point where you want the element to start moving up.
During the first stage ('HELLO' fixed) you can detect page scrolling and perform animation on the element.
Second stage, when you want 'HELLO' start scrolling, switch its positioning to absolute (or relative) and at the same time set its vertical position top at the same coordinate the page has been scrolled to (window.scrollY)
On http://www.beargrylls.com/ its intro stops the normal scrolling on the page but uses the scroll event to do effects.
How do you:
Stop the scrolling effect on the page without an overflow:hidden css rule
How do you do #1 while still taking in scrolling offset values (I'm assuming this is what is being done).
Thanks.
I have a requirement to add a scroll bar that is always visible and which can be directly used by mouse or touch to scroll the contents of a large ListView.
The normal way of scrolling on mobile devices is by swiping up or down. During the scroll process there will be a small scrollbar visible but that scrollbar disappears and even while visible it can't be used to do any actual scrolling.
After much searching I could not find what I needed.
So my question is: Is there a way to make the scrollbar in the ListView fully usable or should I disable it and create a separate scrollbar which I will need to keep in sync. If so how?
For a functional example of something I would be working with see: https://fiddle.sencha.com/#fiddle/124j
I'm working on a very animated website that extensively uses the pin function of superscrollorama to pause scrolling while still animating certain elements based on scroll position.
The issue is one of stability and optimization. The client, of course, wants the site the be super stable and glitch free, even when grabbing the scroll bar with the mouse and jerking it up and down. Fortunately, this is the only way to get the problems to rear their ugly head, but ugly they are.
When jerking the page up and down with the scroll bar, certain elements are "lost" or "misplaced". I suspect that their positioning is not being reset appropriately. When pinned elements are unpinned, the screen goes white until the next section is pinned. You can see this especially when jerking the page up and down, stopping at the top of the page. Try scrolling down from there. Even some animations are only partially rendered in the scene after the initial office scene. I've tried resetting each affected img and divs position to absolute on unpin to no avail. I've also forced an initial fixed position on each affect img and div and still had issues.
Could it be that the is just too much going on and the browser/computer cannot render it all quick enough, dropping the unexecuted JavaScript and leaving the animation only partially completed?
I am new to the world of web development, especially front end stuff. Any help is really appreciated.
EDIT: I ended up scrapping all of the Superscrollorama code and used Skrollr instead. None of the glitchy stuff happens now + using Skrollr made it easier to make the site responsive. Even works to a certain degree on mobile/tablet.
URL: TalentVisor
Ok, so I've created a little plugin that takes a bunch of elements and creates a sort of never ending list. I'll try to explain...
I have a div, and it's got about 20 elements tags in it. When the user scrolls up, the top element moves out of view and is moved to the bottom of the list. And vice-versa so that when the user scrolls down, the bottom element is moved to the top of the list.
This is specifically for Mobile Safari (iPad, iPhone) web content
What I would like to do is implement inertia so the scrolling slows to a halt in response to how fast or slow the user is scrolling when their finger leaves the screen. Just like the inertia commonly found in the iPhone / iPad UI.
The problem is, every time an element moves to the top or the bottom of the list, the scollTop value for the parent div is adjusted to make it look like all the elements are staying in the same place. Which means the scrollTop value is never more than the top elements total height. So there's no value I can think of that I can keep on manipulating to give the illusion of inertia.
I'm stumped. Does anyone have any suggestions?
iScroll implements scrolling with inertia, but I'm not sure how it would react to you adding and removing elements mid-scroll. Might be worth looking into though.