I am building a website using react to implement.First, we scroll the page to the bottom or middle position.Then we click refresh button in the iphone safari browser，page scroll to the permanent position strangely.I have tried to change the flex layout to float layout and add pageshow event listener to set scrollTop zero using
window.scrollTo(0,0)
.But page still stop at the permanent position in safari mobile.
I guess the problem is the page save the position of last view, but when page fresh, the content of the page is not show completely, and then the page could only scroll to the permanent position.At last, the rest part of the page show out.And the pageshow event has been triggered early before the page scroll to the permanent position.
How can I force the page to be scrolled to the top on page refresh except window.scroll? How can I solve this strange behavior of the safari browser?
I have the same issue as you using react on ios safari, the only fixed I found is to use a setTimeout in componentDidMount, but I really don't like this solution
componentDidMount() {
setTimeout(() => {
window.scrollTo(0, 0);
}, 800);
}
Hope it'll help
use window.scroll(0, 0) instead of window.scrollTo()
Related
Here's the scenario I'm coming across that's affecting my GSAP ScrollTrigger animations:
I have a home page that loads and animates.
When I scroll down the home page, scroll trigger behaves normally.
When I get to the bottom and decide to use the navbar to navigate to another page (I'm using the Nextjs <Link> component here), it sends me to the new page but starts at the BOTTOM Of the new page and quickly scrolls to the TOP of the new page.
This is a problem because it triggers all of my GSAP animations simultaneously for that page.
Is there a way to switch to a new page but START at the top— rather than start where ever you are in the y-position and scrolling to the top of the new page?
Essentially what's happening is that when I click on a <Link> component in Nextjs, the y-position of my viewport is retained during page transition. Once I'm on the new page, I'm still on that same y-position of the previous page, but then it SCROLLS to the top. This is bad because it triggers all of my GSAP animations.
Nevermind, I solved it!
I needed to override the scroll-behavior: smooth; with scroll-behavior: auto !important;.
I basically put scroll-behavior: auto !important; at the root :root {}.
This issue happens only in iOS 8 (8.1 to be exact). It does not reproduce in iOS 7.
The use-case: Scrolling inside an element with scrollable (long) content.
If the page is not zoomed-in - it works as expected.
When you zoom-in the page - it stops working, the page is scrolled instead (as if you reached the end of the scrollable content). The effect is continuous: the higher the zoom - it's less possible to scroll the content.
Test page: here
Open the link in your iOS 8 Safari - see that the list element is scrollable.
Now zoom-in the page and try to scroll the content of the list - the page is scrolled instead of the items inside the list.
I've placed the red markers so it will be easy to see that the page is scrolled.
I've tried different CSS rules and even JS to prevent the page from scrolling (that still does make the content of the element scroll).
Has anyone encountered this behaviour or has a suggestion how to fix it? I really don't want to implement content scrolling with JS.
Disabling the zoom on the page (with meta viewport) is not an option for me.
The new mini-site for iPhone 5s has a special page scroll:
http://www.apple.com/iphone-5s/
Every time you flick the page, it glides and stops at the next full page, not halfway, and not any more than required. How do they do it?
I had to do a similar site and I created a plugin for it:
http://alvarotrigo.com/blog/fullpage-jquery-plugin-for-fullscreen-scrolling-websites/
Living demo
In mine you can also:
Use it over IE 8 and old browsers with no CSS 3 support.
Slide throw the page using the keyboard arrows.
Add horizontal sliders.
Resize of texts when resizing the window.
Mobile and Tablet detection enabling the scrolling on them. (as there are usually problems to visualize big contents and texts)
It is in its first version, simple but working well :)
I will keep improving it as far as I can. Suggestions will be more than welcome.
OnePageScroll may be what you're looking for: http://www.onextrapixel.com/2013/09/18/onepagescroll-js-creating-an-apples-iphone-5s-website/
I've been fiddling with a solution to a similar problem.
All my solution does is monitor when the window scrolls.
if ($(window).scrollTop()+$(window).height()>=$("#page"+(nextpage)).offset().top+100) {
If it scrolls past the end of the "page" by more than 50px jquery animates the scroll to the next "page".
$('html, body').animate({ scrollTop: pageheight }, 500, function() { currentpage = nextpage; animatingdown = false; document.location.hash = currentpage;});
It does the same for scrolling up. This covers scrolling by mouse, keyboard or javascript.
Check out the full code at http://jsfiddle.net/dLCwC/1/
Maybe it'll be of some use to someone (let me know if it is, or isn't).
I'm running the latest download of sencha-touch off of the website download page.
I've got an html template with a nested iFrame that contains a Vimeo video.
When I touch any space AROUND the video, the panel scrolls exactly as expected, however, if I touch the video when trying to scroll, the whole app scrolls (tabbar menu, top toolbar, etc) and the actual panel doesn't scroll to reveal the content further down the page.
Is there a way to make it so that it scrolls properly no matter where on the screen you touch?
You probably want to take a look at the dom events that are being fired and try to stop the ones that are giving you the issue. At worst the user may not be able to scroll when touching the video first.
I had a similar issue with Google Maps (not in an iframe however). If it was embedded in a scrollable panel, the panel would scroll at the same time as interacting with the map. What I did was stop the propagation of the DOM events at the containing element. This resulted in the map being able to scroll/zoom, but the panel no longer responded to the events as well.
domEvent: function(evt, el, o)
{
evt.stopPropagation();
},
somefunction: function(){
this.googleMap.el.on({
tap: this.domEvent,
touchstart:this.domEvent,
touchmove:this.domEvent,
touchdown:this.domEvent,
scroll:this.domEvent,
pinch:this.domEvent,
pinchstart:this.domEvent,
pinchend:this.domEvent
});
}
I am trying to automatically scroll to a anchor when opening a fancybox iframe like so: www.example.com/posts#header.
It kinda works but it scrolls to the wrong position, either too far up or way too far down (mostly way too far down).
I tried using the jQuery ScrollTo plugin but it also scrolls to the wrong position and additionally "pops out" the page from the fancybox to the whole window.
Would be thankful for any tips on how to get this working!