I would like to disable the iOS overscroll in a webapp but still allow the body to be scrolled.
$(document).on('touchmove', function(e) {
e.preventDefault();
});
disables scrolling altogether (as one would expect).
Is there a way to do what I want to do?
I had pretty much the same issue. This should help you:
// Disable overscroll / viewport moving on everything but scrollable divs
$('body').on('touchmove', function (e) {
if (!$('.scrollable').has($(e.target)).length) e.preventDefault();
});
document.body.addEventListener('touchmove',function(e){
if(!$(e.target).hasClass("scrollable")) {
e.preventDefault();
}
});
Try this i just got in via google
Related
I'm using revslider plugin with one page vertical slide and a form in the first slide. I would like to prevent all revslider scroll function when inside the form div.
Can it be possible to prevent revslider scroll function and use the normal scroll inside the form?
Any help would be appreciated !
Solved by adding this, referred to this post
// prevent scroll when inside form div
$(window).bind('mousewheel DOMMouseScroll', function(event){ return false});
$('#YourID').bind('mousewheel DOMMouseScroll', function (e) { return false; });
I have two pages and on one page I need to have disabled scrolling and on the other page enabled, but when I try to do that with jQuery the whole screen shakes and it is almost impossible to scroll.
This is how I did it in the script:
$(document).ready(function () {
if (window.location.pathname = '/all') {
$('body').css('overflow-y', 'auto');
} else {
$('body').css('overflow-y', 'hidden');
}
});
Is there an other way which would work to do the same thing?
I think the problem is with the single equals sign in the if statement.
You can use preventDefault on scroll events.
$(window).on('mousewheel DOMMouseScroll', (e) => e.preventDefault())
If you also need to block down and up keys you also need to capture the keypress event on the $(window) and preventDefault them.
I can not seem to get Photoswipe to prevent a drag/swipe from changing slides (so only the arrows go to the previous/next slides)
The issue is that I've got a HTML slide with touch events inside it, but photoswipe's touch events are superseding them and while dragging around in the content of the slide, the entire slide moves too...
I thought this event was supposed to prevent it?
pswp.listen('preventDragEvent', function(e, isDown, preventObj) {
preventObj.prevent = true;
});
I also tried the 'isClickableElement' option, but that doesn't seem to help, either...
This method isn't ideal, but if you're looking to disable swiping/dragging without having to use a modified version of PhotoSwipe, this worked for me:
var allowSwipe = false;
function preventSwipe (e) {
if (!allowSwipe) {
e.preventDefault();
e.stopPropagation();
}
}
pswp.container.addEventListener('pointerdown', preventSwipe);
pswp.container.addEventListener('MSPointerDown', preventSwipe);
pswp.container.addEventListener('touchstart', preventSwipe);
pswp.container.addEventListener('mousedown', preventSwipe);
Or if you're using jQuery:
var allowSwipe = false;
$(pswp.container).on('pointerdown MSPointerDown touchstart mousedown', function () {
return allowSwipe;
});
Using the allowSwipe variable, you can re-enable swiping at any point by setting it to true.
This is not so much of a question as it is an solution to the question.
It was difficult find a solution until I stumbled across the answer in added by hallodom (How to disable scrolling temporarily?) which was responding to a slightly different problem.
I wanted to explicitly document an answer to the problem. Other solutions are most welcome and would add to the conversation.
hallodom's solution was:
For mobile devices, you'll need to handle the touchmove event:
$('body').bind('touchmove', function(e){e.preventDefault()})
And unbind to re-enable scrolling. Tested in iOS6 and Android 2.3.3
$('body').unbind('touchmove')
I used hallodom's solution by simply attaching them to functions called when an object in my DOM was clicked:
$('body').on('click', 'button', function(e){
if($(this).prop('checked')){
disable_scroll();
}else{
enable_scroll();
}
});
function disable_scroll() {
$('body').bind('touchmove', function(e){e.preventDefault()});
}
function enable_scroll() {
$('body').unbind('touchmove');
}
Try this code :
var scroll = true
$(document).bind('touchmove', function(){
scroll = false
}).unbind('touchmove', function(){
scroll = true
})
$(window).scroll(function() {
if ($('button').is(':checked') && scroll == false) {
$(document).scrollTop(0);
}
})
I use the following script to prevent the first tap on a link:
$(document).ready(function () {
$('#container a').bind("touchstart",function(e){
var $link_id = $(this).attr('id');
if ($(this).parent().parent().data('clicked') == $link_id) {
return true;
} else {
e.preventDefault();
}
});
});
Because these links [#container a] are covering the whole screen I am not able to scroll on touch devices.
Is there a way to keep the scrolling behavior working if the user scrolls (touchmove / swipe / drag / …)?
Maybe there is another way / script to get the effect I want without disabling scrolling…?
I found another solution to this problem by using quo.js this library will handle tap event without effecting on scrolling functionality
the code will be like this
$(document).ready(function () {
$$('#container a').tap(function(){
//your function here
});
});