Prevent elastic scrolling in ipad/iphone safari, but allow content scroll - javascript

I want to disable the bounce effect(elastic scrolling) ipad/iphone safari browser. And tried using preventing default on touchmove but that is preventing the whole scrolling. I want to be able to scroll the content but just prevent the bounce. My header and footer are fixed.
An ideas?

With Mobile Safari on iOS8 (AppleWebKit/600) you can detect if scroll bounce occurs at the top (swiping down) using the following:
window.onscroll = function() {
if (document.body.scrollTop < 0) {
// do something
}
}
I had a play to see if I could find a clean way to "interrupt" the bounce, but didn't find anything nice.
Note the window.onscroll solution won't work in UIWebView because I think the onscroll event is not fired in UIWebView, however that isn't a problem because UIWebView doesn't have bounce! You can detect if using UIWebView versus WKWebView using https://stackoverflow.com/a/30495399/436776
I was using this code to test (must clone and open fullscreen to test on iOS): http://jsbin.com/tocako/edit

Related

JQuery mobile IOS device how to remove default scroll on web

I am having issues with the default "refresh" scrollbar in IOS. I have created my own scrollbar in a div and i cant seem to access it without using the default scrollbar in IOS. I have fixed the problem on both web and android but i cant seem to figure out how to remove the "default" scrollbar on IOS devices (phone and Ipad).
To prevent user from scrolling the screen you need to redefine touch move event
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: false });

iFrame FancyBox 2.1.4 in iOS - Iframe Scrolls up After Interacting with Div Using Javascript

When moving and displaying a div in a Fancybox iFrame (using javascript) in iOS devices, the iframe scrolls to top of the window and the user has to scroll back down to see the div. In non-iOS devices the div is moved into view without the iFrame scrolling up (which is what I want).
https://embed.plnkr.co/MhUHCeAaN6VVsllmovTj/
Steps to reproduce:
Navigate to the above url on an iPad using Safari
Tap "Open Fancy Box"
Scroll down and tap the "Click ME!" button
Notice the iFrame scrolls to the top.
The button creates a div, moves it to the top right of the point that was tapped, and makes it visible.
I confirmed this behavior on:
iPad (iOS 11.2.6)
Safari
Chrome
Mozilla Firefox
iPhone (iOS 11.2.6)
Safari
I confirmed this behavior does not happen on:
Windows 10
Safari (v 5.1.7)
Chrome
Mozilla Firefox
Android (7.0)
Chrome
I have tried the answer provided in this thread: fancybox2 / fancybox causes page to to jump to the top, but the iFrame still scrolls up after the button is tapped, and then locks the iFrame so you can't scroll back down.
I also tried using jQuery to scroll to the desired div (selecting with an id) after the onclick function finishes, but the iFrame doesn't move. Using "SLaks" suggestion here: How do you scroll an iframe from within using jquery?
I agree with Janis, this seems to be an issue with iOS specifically. So, I will create or upvote a corresponding bug ticket on the Apple website.

Interrupt iOS scrolling using JavaScript

Is there way to interrupt iOS scrolling using javascript?
Example 1: user is scrolling content by moving his finger through device screen. When some event happens user continue moving his finger without raising but there is no scrolling anymore.
Example 2: user initiated scrolling but stopped his finger without raising. Some event happens and scrollbar disappears.
Example 3: Momentum scrolling completely stops when some event happens.
The first case could probably be covered using the following piece of code from another question
<script type="text/javascript">
function blockMove() {
event.preventDefault() ;
}
</script>
<body ontouchmove="blockMove()">
However, it will only work on iOS 8+. As for the other two cases I'm not aware of any method to do that.
If you're talking about interrupting the iOS inertia/momentum scrolling, then I might have something for you.
First of all, you need to add fastclick.js. The lib removes the 300ms click delay on mobile devices and enables event capturing during inertia/momentum scrolling.
After including fastclick and attaching it to the body element, my code to interrupt scrolling looks like this:
scrollElement.style.overflow = 'hidden';
setTimeout(function() {
scrollElement.style.overflow = '';
}, 10);
The trick is to set overflow: hidden, which stops the inertia/momentum scrolling. Please see my fiddle for a full implementation of stop scrolling during inertia/momentum.

Trigger scroll in Opera mini

How to scroll down or up to specific Y-px position in opera mini mobile browser on the page without using any 3rd libraries just pure js? Tried everything possible from scrollTo to SCrollInto View nothing works. Help please.
The scroll behavior is true as in every modern browser.
When you just open the new window/tab and don't touch screen the javascript scroll API via window.scrollTo(x,y) works fine because you did't signaled the browser where do you want to scroll.
But if you init scroll event (for example swipe) when your page loading the browser will ignore javascript scroll API for example scrollTo. And if you will refresh the page the javascript scroll API will be not work. Because it's a good practice to return user on that page place where user was before refresh.
Also hash bookmarks can scroll the page. If you set a #bookmark to the page URL, the page will scroll to bookmark until you scroll the page. And then you scroll all will be like I wrote upper: javascript scroll API will be ignored.
But there is one way to scroll in any case - manipulate with hash bookmarks:
window.scrollTo(0, 500);//will not work if the user scroll the page
location.hash = '';//reset hash
setTimeout(function () {
location.hash = 'bookmark';//will scroll to bookmark in any case
}, 1000)//remember about operamini timers limit
It works so because use must control the page, not it's code.
From the Opera doc, below the Unsupported DOM events section you will find:
As you can see, key events such as keypress and keyup are not
supported. Neither are touch and scroll events.
So scroll events are not supported in Opera Mini. See Other References

Drag the application phonegap

I wonder how I do that the scroll PhoneGap does not have this
in my application when I drag the mouse on the application, it will go
up or down, as I do Ileave it fixed? I posted pictures of what is
happening, thanks!
http://postimage.org/image/pa2kyvvwb/
http://postimage.org/image/gf8cnrjsx/
You can use this script, but then you'll have to handle scrolling yourself if you page is bigger than the screen:
//Prevent dragging of canvas on iOS
$(document.body).bind('touchmove', function(event) {
event.preventDefault();
});
This seems to be on every apple device the same. This is not an PhoneGap feature. When draging a website on my mac mini the same happens. So you'll have to do it programmatically in objectiv-c. Maybe this works
CGSize scrollableSize = CGSizeMake(320, myScrollableWidth);
[myScrollView setContentSize:scrollableSize];

Categories

Resources