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
});
});
Related
https://codepen.io/mikun/pen/YWgqEX this is a link to what I am working with.
Here is what I have added to the JS file:
$(window).scroll(function (e) {
console.log(e);
e.preventDefault();
return false;
});
not quite too sure how else to go about this. Again, just want the user to be able to scroll through the slides up and down using their mouse/trackpad
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 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