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; });
Related
What's happening: Scrolling works no matter which position i have the mouse while i scroll.
What i want to achieve: When the user scrolls with the mouse pointer positioned inside a particular container, I would like to disable the plugin from changing pages. When the user scrolls with the mouse pointer outside that same container, the normal functionality of the plugin should be restored; i.e. the pages should be scrollable again.
What have i tried: I listened for the scroll event on the document and found out whether the mouse is inside the container while executing the scroll and store the possibilities as a boolean.
$(document).bind("mousewheel", function(event) {
// preventScroll = true;
console.log(event);
if($(event.target).closest(".no-scroll").length) {
preventScroll = true;
}
else {
preventScroll = false;
}
});
Then onLeave i try to find out the value of preventScroll and try to stop event propagation (since in want to stop an actual event) by returning false
setTimeout(function() {
console.log(preventScroll);
if(preventScroll) {
console.log("no-scroll")
return false;
}
}, 10);
I an using setTimeout to capture the desired value of preventScroll although I guess the plugin executes a scroll within that 10 ms and that's why return false doesn't seem to have an effect. I can't seem to figure out how else to proceed to achieve the desired functionality.
Codepen: https://codepen.io/binarytrance/pen/YxBqPj
In this implementation, the container i want to disable scroll is in the second page/section. Please be aware of the values spit out in the console.
Use the fullpage.js option normalScrollElements. Check the fullpage.js docs for more info:
normalScrollElements: (default null) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the jQuery selectors for those elements. (For example: normalScrollElements: '#element1, .element2'). This option should not be applied to any section/slide element itself.
How to prevent body scrolling when scroll on Drop down menu.? 1
Dear friends,
actually i'm facing problem in my project. see project
i did horizontal scrolling on this page. its is working smoothly.
but when i scroll on drop down menu the page also scrolling. is there any option to prevent the page scrolling when mouse hover in drop down menu?
adding the script here which i used for horizontal scroll:
<script type="text/javascript">
// By default, swipe is enabled.
$('section').horizon();
// If you do not want to include another plugin, TouchSwipe, you can set it to false in the default options by passing in the option as false.
//$('section').horizon({swipe: false});
$(document).on('click', '.go-to-2', function () {
$(document).horizon('scrollTo', 'section-section2');
});
</script>
please help me to find out Any solution...
If you want to prevent the text area below Emporio Kannur... from scrolling, try adding a mousewheel event listener and stop event propagation, so it does not bubble up to the horizon jquery plugin.
Something like this:
// .work_detail_wraper contains the text you down want to see scrolling
$('.work_detail_wraper')
.on('mousewheel DOMMouseScroll' , function(e) {
e.stopPropagation()
})
You can also take a look at the horizon plugin's code, and adapt it so it doesn't scroll on certain events.
You can use 'stopPropagation()' for this
$('.section-section2').scroll(function(e){
e.stopPropagation();
})
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 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 want to hav a scrollable container that hosts a scrollable list with iScroll4. I got everything running on my own:
http://jsfiddle.net/BH2F3/
(does not work in the preview, so please download and try locally)
The PROBLEM now is:
When I do a scroll action on the list, also the outer container scrolls. How to I protect the outer container from scrolling and only apply the scroll action to the nested list? I already tried "snapping" to the list with no success. Do I have to bind to the "onBeforeScrollStart" ?
The official Implementation is : onBeforeScrollStart: function (e) { e.preventDefault(); }, so I'd expect the outer container not to scroll.
Just found out:
It is not a matter of Default prevention but event bubbling.
The solution is in overwriting onBeforeScrollStart !
onBeforeScrollStart: function (e) {
e.preventDefault();
e.stopPropagation();
},
For current version, the event beforeScrollStart don't have argument event. This can be done this way:
iscroll.on('beforeScrollStart', function() {
scroll.disable();
});
iscroll.on('scrollEnd', function() {
scroll.enable();
})