Is there any way to prevent ONLY scrolling up within a document (including touch devices)? In this example the user will only have the ability to scroll down.
This is what I'm currently using but this disables all scroll.
$('.example').on('touchmove', function(e) {
e.preventDefault();
});
Related
I'm using a scroll animation through the "scrollify".
i want limit any scroll function.
i want to scroll only use button click scrolling, but not use touch scroll and mouse scroll.
if it's hard, expedient also good. Is there aother way?
I think touch events are currently not supported. But for the mousewheel you could do:
JQuery:
$('body').bind("mousewheel", function() {
return false;
});
I'm trying to prevent default scrolling behavior while still determining the number of pixels a user has attempted to scroll.
My objective is (at some vertical position on my page) to fix a navigation element to the top of the screen and hijack the scroll/swipe event to pull down a mobile menu when the user scrolls back up (so moving said element up and down by n pixels depending on how many pixels the user tries to scroll).
I am aware of the UX/accessibility concerns insofar as blocking native behavior, but the suits want what the suits want.
So far I have:
$('body').on({
'mousewheel' : function(e) {
e.preventDefault();
e.stopPropagation();
}
});
but am stumped as to how to access the number of pixels scrolled (since element/scroll offsets are no longer a guide).
Edit: Please note that this question is specifically asking for information regarding mouse/scroll actions while scrolling is blocked. Don't think this has been appropriately marked as duplicate.
This is browser-depended because of the mousewheel event you are using. This is because it is non-standard. Don't use it!
In Chrome (43.0) you get different properties with different values:
e.originalEvent.wheelDelta: -120
e.originalEvent.wheelDeltaY: -120
e.originalEvent.deltaY: 100
In IE (11.0), you can get only one property:
e.originalEvent.wheelDelta: -120
In Firefox (38.0.5), the capturing of the mousewheel event doesn't work at all.
Solution:
Use the wheel event (MDN reference). This event has the e.originalEvent.deltaY property in all browsers.
Before cancelling event propagation take the deltaY out of the original event like this
$('body').on({
'wheel' : function(e) {
console.log(e.originalEvent.deltaY);
e.preventDefault();
e.stopPropagation();
}
});
I'm currently developing the frontend of a website which is single page with smooth scrolling between divs.
I want to disable scrolling by mouse itself.
I know overflow:hidden; removes the scroll bars, however, I want the page to scroll only when they click on the link to the required div. What is the correct way to go about it?
Try this:
<script type="text/javascript">
if(window.addEventListener){
window.addEventListener('DOMMouseScroll',wheel,false);
}
function wheel(event)
{
event.preventDefault();
event.returnValue=false;
}
window.onmousewheel=document.onmousewheel=wheel;
</script>
I want some js to automatically scroll just a slight bit down the page, however I also want this scroll to be interruptible by the user.
When using jquery to auto scroll, when you animate the scroll with .animate and then the user starts scrolling while the animation scroll is still going they interact with each other and create a strange jumping effect.
Is there a way to make so when the user scroll during a javascript scroll it just stop the javascript scroll?
It can't be done since you can't know if the end-user scrolled or you scrolled the page via javascript.
A scroll event is sent whenever the element's scroll position changes, regardless of the cause. A mouse click or drag on the scroll bar, dragging inside the element, pressing the arrow keys, or using the mouse's scroll wheel could cause this event.
Docs
What I tried to do but failed because the above:
// callback for the scroll event
$(document.body).scroll(function(){
// Stop the scrolling!
$('html, body').stop();
});
A not working demo...
The other users answer is actually incorrect, it is possible and has been answered before:
How can I differentiate a manual scroll (via mousewheel/scrollbar) from a Javascript/jQuery scroll?
Check the answer
"$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(e){
if ( e.which > 0 || e.type == "mousedown" || e.type == "mousewheel"){
$("html,body").stop();
}
})"
I've updated the previous users JS Fiddle to work with the proposed solution and it works perfectly.
http://jsfiddle.net/Lwvba/7/
I'm working on an iPad browser games and can't seem to lock the window. I've prevented scroll bars using typical overflow techniques, but the entire window still drags up and down (the new rubberband - type effect)
Is there a way to remove this window dragging?
Thannks
Bind to touchmove and preventDefault action which is scrolling
document.body.addEventListener('touchmove', function (ev) {
ev.preventDefault();
});
Or with jQuery
$('body').bind('touchmove', function (ev) {
ev.preventDefault();
});
EDIT: I've actually come across another solution that may be even easier, try this
body { overflow: hidden; }