Browser / address bar when scrolling mobile browsers by click - javascript

I’m struggling against a scrolling issue with mobile browsers on both iOS and Android. Expected behaviour is the top browser bar disappearing or getting minimized as soon as I start scrolling the page down by swiping my finger to the top.
Unfortunately the behaviour of the browser bar is completely different when the scrolling isn’t done by hand but by clicking a link to target an anchor. While the page scrolls to the anchor as expected, nothing at all happens to the browser bar. As long as I don’t swipe with my finger, the bar is staying in place without any changes.
I tried several settings in meta/vieport and javascript like this without success:
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 1);
}, 0);
});
How can I make the browser to behave the same way, no matter whether I’m scrolling with a swipe or a click? I can live quite well with the differences among browsers, but would appreciate very much if the same browser would act always the same way in both situations.
Thanks for any hint
Ralf

Related

Prevent HTML viewport from resetting when javascript changes text

I've been trying to use scroll-snap on my website, and it's working wonderfully on firefox, both desktop and mobile.
However, it's not working at all on chrome, either destop or mobile.
The issue is that I have a javascript script constantly changing a text box like this:
while(i<letters.length) {
await waitForMs(delay);
splash.innerHTML = splash.innerHTML + letters[i];
i++;
}
and whenever the text gets refreshed, the viewport does a little jerk and jumps back up to the text, even if the user is trying to scroll.
You can test the issue at the website at the website here.
There are multiple issues here, but I can see there would be different ways to solve it. The main issue is that the scroll snap is not working on chrome, but another issue is that the javascript is sort of refreshing the viewport? Which means the scroll snap cannot act.

Hide browser bar in mobile version

I am trying to hide the browser in mobile version and have tried to use below on load:
<script>
window.addEventListener("load",function() {
setTimeout(function(){
// This hides the address bar:
window.scrollTo(0, 5);
}, 0);
});
</script>
However this isn't working on my android device it is only scrolling down 5px and not hiding browser bar as if human scrolled down. I feel like this has something to do with viewport but can't figure.
I have tried to follow https://developers.google.com/web/fundamentals/native-hardware/fullscreen/ as well but I can only it make it work with click. I don't really want to go full screen really just hide browser as if user has scrolled down on load (if scrolled up than visible again).
I found a site that has something similar (https://www.webpagefx.com/blog/internet/interstitial-ads-google-hate/amp/) - this happens when you enter via link google search and before entry into site the browser bar has already been hidden, ie scrolled down to google search.
If anyone can help point to right direction that would be helpful so I canget started to code the script that I need. Ideal android and ios resolution (if not than just android)

jScrollPane on touch devices - drag button is in reverse

I've implemented jScrollPane and I'm having an issue on touch devices.
The example I'm using is http://jscrollpane.kelvinluck.com/drag_size.html where I have a vertical scroll using a circular button image for the scroll on the track. The class that's added to this is jspDrag.
On desktop, when you click and scroll the vertical button, it drags down and the content scrolls up, which is natural in my eyes.
The issue I'm facing is on touch devices (check the example URL above in Chrome using iPhone/iPad emulation in dev. tools) where you can't actually drag the button down - you actually have to scroll it up for the content to scroll?!
Users are definitely not going to know this as it's a button rather than a content block that you're using as a control.
I'd like to be able to touch and drag the button down on touch devices, rather than up, to make the content scroll.
Has any one come across this issue and managed to solve it? I've searched SO and Google Groups with no luck.
Thanks.
Unfortunately jScrollPane seems to just work like this, with an annoying caveat, which is unfortunate - I really liked the plugin.
I came across http://manos.malihu.gr/jquery-custom-content-scroller/ which functions the way it should and runs super smooth on touch devices.

Android browser floating menu issue while fast scrolling

I have a problem with fixed floating menu on android phones browsers (not tested on other phones) and still can't find any solution.
Let's take this as an example: (the first link I found on google)
http://www.backslash.gr/demos/jquery-sticky-navigation/
Scrolling and clicking on menu works, but if I make fast scroll and let the scroll stop automatically 'til it reaches phone browser's bottom or top, the floating menu becomes inactive (not able to click on floating menu, focus-link position is changed). If I make fast scroll and stop scrolling by touching the screen (don't let the scroll to reach bottom or top and stop automatically) the floating menu works and links are active.
I have tried about 10-20 examples I found on google, even bootstrap has the same issue.
Also tried libraries like mCustomScroll and iscrool, but they are too slow for phone browser or have other issues.
Tested on android > 4.x several different phones and versions.
I hope you understood the problem and can suggest anything.
Also it would be nice if anybody could test it on iphone (but I think its Android problem).
Thank you.
Found good enough solution https://github.com/filamentgroup/Overthrow/
So I was able to create fast scrolling page and make workaround for described bug.

Browser scrolling versus in page scrolling

I'm using OSX Lion and Chrome which allows you to swipe back and forth to go back/ forward in the browser. However I'm finding it often interferes with scrolling within a page. I have horizontal scroll bars within the website i'm creating and swiping back and forth within them often causes the browser to move forward/ backward in my browse history - definitely not the behaviour i want.
I'm creating my horizontal scroll boxes very simply with html/css and the overflow property. I'm wondering if the correct approach is to use javascript to detect a scroll event, and prevent the default behaviour. It just seems like a more complicated approach to something that should be simple.
http://cubiq.org/iscroll
http://www.azoffdesign.com/plugins/js/overscroll
http://uxebu.com/blog/2010/09/15/touchscroll-0-2-first-alpha-available/
http://plugins.jquery.com/project/jScrollTouch
Tried or seen any of these, you can just disable the browser scrollbars and use these instead..

Categories