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 });
Related
I need to disable touch action on html element for some reason. I have tired with CSS property touch-action: none. But it is not working for Safari and iOS devices. Is there any way to disable touch action for html elements on iOS.
If you don't mind click events and other pointer event also being stopped, you can try pointer-events:none; in your CSS. If you want this to be specific to mobile devices, you can apply it using media queries. If you want it only on iOS you can do user agent sniffing in JS [As done in #Denno's Answer] and apply a class with that style on it to your element .
Whilst it's not recommended, you can use user agent sniffing to determine if a user is on an iOS device
var is_iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
Then, using that in an if condition, create an event listener to listen for touch events, and then prevent their default action
if (is_iOS) {
document.querySelector('.some-element').addEventListener('touchstart touchmove touchend', function (e) {
e.preventDefault();
});
}
I haven't tested the above code, but in theory it should work
I have made simple website surajcreator.com/indermenschen . But the problem is in mobile device while scrolling page automatically refreshes itself. It has some scripts for background image slide. I don't understand where the problem is. Please help me.
Whoever stumbles upon this question could try to suppress the touchstart and touchend events, like
document.addEventListener('touchstart', function(e) {
console.log('touchstart');
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
});
In my case it was a manual page refresh, triggered by the window resize event, as I wanted to calculate dimensions etc. Turns out the resize event might be triggered by appearing control bars on mobile devices.
I'm using JQuery Mobile for recognizing swipe events and it works well. Events fire on Windows Mobile (7.5 in my case), but what also fires is the web browser's default events for navigating the browsing history. Swiping right turns back a page. How can I prevent this default behavior?
I tried the preventDefault() and it didn't help here.
It will deactivate the touch:-
Add CSS snippets:
*{
touch-action: none;
}
But to reactivate the touch event only on the some zone, to allow the player to play or active the touch
To activate for certain places add this :-
#activetouch{
touch-action: chained;
}
Reference:https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
Windows Phone 7/IE9 does not support mousemove event so there is not way for jquery mobile to recognize swipe event.
Some mobile frameworks like Apache Cordova (PhoneGap) provide workaround for this by adding special shim between native (silverlight) touch events and web browser control to fix missing mouse events. Demo
This works fine on Windows Phone 8 since it supports mousemove.
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
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];