In my React application, the user is presented with a horizontally scrollable list and can scroll left / right to load more data.
When the user scrolls all the way to the left, I load more data and append it to the beginning of my list. This works fine, except that the scroll position seems to be reset to 0.
To solve this, I restore the scroll position after prepending the new data to my list. This works well on Android, but on IOS this doesn't work.
On IOS, the scrollLeft position of my DIV is still reset to 0 after rendering, even if I restore the scroll position after rendering. The strange thing seems to be that this only happens if the user was still scrolling when the rendering took place.
So it seems like on IOS Safari, setting the scrollLeft / scrollTop position of a div only works if the user is not currently scrolling that div.
Has anyone seen this before, and perhaps know a workaround?
Related
I have a div with fixed position. When I scroll inside a component, I calculate position of another div in order to "stick" the fixed position div to it - so on every scroll position of a fixed element changes.
In chrome everything works correctly but in firefox I have a situation that after every scroll the fixed div "chases" div to its new position.
The strange thing is that when I turn on and off developer tools in firefox, problem disapears.
I don't understand why dev tools helps to workaround this problem and why in chrome it works correctly.
I know that this is a hack and it should be anchored to the div it is 'chasing' but in this case I don't have time to refactor implementation.
Hi everyone,
I'm working on a side navigation menu for my churches website. You can see the demo here:
http://amightywind.com/sideNav/
However I have a problem. The navigation is supposed to work so when you scroll down the page past it's bottom the css changes to make it anchor and stop moving.
The problem is that the "anchoring" effect doesn't always work smoothly and will only be applied after you scrolled a few pixels past the bottom.
This causes the side bar to "jump" back into it's designed place.
I know this problem is probably caused by asynchronous panning (the browser delays repainting when scrolling to keep a smooth frame rate).
I was going to call this unsolvable, but then I saw firefox's quantum browser page.
If you scroll down halfway, you will see a large pink box on the left that says "Firefox Quantum features".
The text changes positioning when you scroll into it similarly to how my side bar works. However 2 things are different.
1 there is no jump. It is perfectly smooth in every browser I tested.
I figured this could easily be because they are moving a smaller portion of content than I am, but....
2 when I inspect element I notice there is no css class/style change on the object when scrolled into it.
How is this possible? Is there a way to make this effect work without Javascript? Or at least more smoothly than I've done just listening to the window scroll event?
Any help would be much appreciated thank you!
I'm having a weird bug with Angular.
Here's the context: The page loads with everything fitting in the window. The user clicks on something and a bunch more content loads. An ng-repeat pushes the document height below the fold, the vertical scrollbar appears, and the user can scroll down to view the rest of the content. Everything works.
If I scroll to the bottom, and then refresh the page, the scroll position jumps back to the top of the page and everything is reset. If I click to load the additional content again, it shows up, but the scroll is 'locked'. The scrollbar still appears, but scrolling with the scrollwheel is impossible.
All the site functionality works, but I cannot scroll down with the mouse (or using the arrow keys). If I click and drag the scrollbar down, it fixes the issue and scrolling is restored.
To make matters worse, the bug only happens about 10% of the time. The rest of the time, the page happily scrolls just fine.
Some clues I've found:
Inside the Angular controller, I added the following:
console.log( $(window).scrollTop() );
This snippet logs whatever the scrollTop value was before the page load. It logs this every time, even the times when scrolling works fine.
Even more confusingly, in the HTML itself, I added the following event listener:
$(window).on("scroll", function(e) {
console.log("Scroll event logged. Current scroll position: ", $(window).scrollTop());
})
This consistently logs, on page load, that a scroll event was detected, and that the scrollTop is now 0.
Even more confusingly, sometimes, when the scrolling does work and the additional content is added, it jumps me straight to the bottom, as if I started scrolling from the bottom.
What I think is happening
I think when the page reloads, it retains its now-impossible scrollTop value. Since the scrollTop is below the document height, the browser tries to scroll back up to zero, but this mechanism is buggy and unpredictable.
Does anyone know a surefire way to reset the scroll position to the top of the page, on page load? Simply using $(window).scrollTop(0) isn't working. I'm hoping someone understands the lower levels of this mechanism (or knows another way around it).
I've tried a number of dirty hacks (like scrolling the window by 1px when the additional content gets loaded), and nothing seems to be working. I've been stuck on this for a couple hours now and it's driving me a bit insane.
Also, I'd love to put this in a JSFiddle, but since you can't refresh a JSFiddle page without losing all the code (or having it reset to a non-running state), it wouldn't work. Sorry!
I'm putting the finishing touches on this parallax website but I'm having trouble preventing some very unattractive horizontal scrolling effects (try it yourself on a touch device by dragging directly to the left).
I've adapted the parallax technique described here using 3D CSS transforms. Unfortunately, one of the side-effects seems to be that the browser thinks the images are wider than the viewport, even though they aren't. I've already tried:
Adding overflow-x: hidden; to the parallax images' containing div, and while that's hidden the horizontal scrollbar, it alone does not actually prevent horizontal scrolling.
Adding a partial workaround scroll event listener to reset the scrollLeft of the container back to 0 with each scroll, which solves the problem entirely on desktop (AFAICT) and partly on mobile (at least when scrolling diagonally).
Unfortunately, it seems that, at least on Android (I don't have an iPhone to test) it's still possible to scroll horizontally without triggering the scroll event workaround. Even more mystifying, while it's in this weird horizontally-scrolled mode I've programmatically traversed the entire DOM and not a single element has a scrollLeft property != 0. I've also called $('*').scrollLeft(0); from the console and it doesn't reset the scrolling. Now calling .preventDefault() on all touchmove events does prevent the horizontal scrolling, but it also effectively breaks the site as a whole since it prevents vertical scrolling too--so that's a no-go.
So how is this thing scrolling horizontally if nothing has a scrollLeft other than 0, and how can I prevent/workaround this scrolling behavior?
I've got a checkScroll handler attached to a div's scroll event (soon to be implemented as a timer instead), which checks to see if the user is nearing the bottom and fetches more data to display. The UI is smooth and works well when used with the mouse scroll wheel, but when dragging the scrollbar the following occurs:
checkScroll handler determines user is near the bottom (and for example, let's say scrollTop is 800)
an AJAX request is sent in the background to fetch more data
data is returned and appended to the div
if the scrollbar is still in drag mode, but the mouse hasn't moved since the data has been appended the scrollbar has now changed size and jumped up a bit, scrollTop is still set to 800 and the data is in the same position
once the mouse is dragged 1px in any direction, the scrollbar jumps back under the mouse and all the data has shifted, the user has lost their original position
Is there a way to prevent this from happening, a la Twitter?
This is standard browser behaviour, Firefox will make the content jump but Chrome keeps the current position when increasing the scrollHeight
PS. How do you close a question as invalid?