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.
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 am using BlueImp Gallery (DEMO). I need to lock hide the buttons on certain situations, that worked great. But now I also need to hide the mouse and touch swipes as well.
Explanation: Users can swipe left or right, this will change the current picture.
I was not able to find the responsible event yet. How can I deactivate the swipe events and active it again? Is that possible?
They had no intend of publishing this feature, but it's in there.
var galleryContext
// initalize your gallery
blueimp.Gallery([{/* your images */}], {
// we need the context of the gallery
onopened: function () {
galleryContext = this
}
})
// now disable
galleryContext.destroyEventListeners()
// or enable
galleryContext.initEventListeners()
You can use on() like,
$(document).on('click touchmove',function(){
if(CERTAIN_SITUATIONS){ // only on certain situations
return false;// it will prevent to do anything in your document
}
});
If you want a div or container to be disable then use it like,
$(document).on('click touchmove','CONTAINER_ID_OR_CLASS',function(){
....
You can use stopPropagation() to prevent bubbling,
$(document).on('click touchmove',function(e){
if(CERTAIN_SITUATIONS){ // only on certain situations
e.stopPropagation();
return false;// it will prevent to do anything in your document
}
});
this worked for me: (tested on v3.2.0)
this.galleryInstance = blueimp(this.config.images, options);
this.galleryInstance.destroyEventListeners();
//this line makes sure no touch events are registered in the init function
//and preserving other events in tact
this.galleryInstance.support.touch = false;
this.galleryInstance.initEventListeners();
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
});
});
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