I have web-page with two buttons, and when clicking on them I want to call mouse wheel up/down events. Not scrollTo or scrollBy - I need mousewheel.
How can I do this? Is it possible with jquery.mousewheel plugin or with usual Javascript?
The mouse wheel event is called 'onwheel' in modern browsers. Try triggering that one.
The following solution worked well for me
//Firefox
$('#elem').bind('DOMMouseScroll', function(e){
if(e.originalEvent.detail > 0) {
//scroll down
console.log('Down');
}else {
//scroll up
console.log('Up');
}
//prevent page fom scrolling
return false;
});
//IE, Opera, Safari
$('#elem').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
//scroll down
console.log('Down');
}else {
//scroll up
console.log('Up');
}
//prevent page fom scrolling
return false;
});
You can't trigger the mouse wheel.
(no matter jQuery or php or something else web code can't do this)
If you want to trigger an event bind to mouse wheel.
Maybe you can try bind the same event to the button with scrollTo?
That's the same with mouse wheel.
Related
I need to make a webpage scrollable only by scrolling bar. I have tried to find how to catch scroll bar event, but as i see it is impossible. Currently i use this functions:
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
function wheel(e) {
preventDefault(e);
}
function disable_scroll() {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;
}
But they are not very useful in my situation, because they block all scroll events. Do you have any ideas? I am thinking about it 3 days already and i didn't find any answer (and questions also). Thanks!
Prevent the window from scrolling with mouse wheel:
As document level wheel event listeners are treated as Passive, we need to mark this event listener to be treated as Active:
window.addEventListener("wheel", e => e.preventDefault(), { passive:false })
If the content of a <div> (or other element) is scrollable, you can prevent it like this:
document.getElementById('{element-id}').onwheel = function(){ return false; }
More info about scrolling intervention and using passive listeners to improve scrolling performance.
Outdated Method:
window.onwheel = function(){ return false; } // Old Method
more info (thanks #MatthewMorrone)
jQuery solution to prevent window scrolling with mouse wheel:
$(window).bind('mousewheel DOMMouseScroll', function(event){ return false});
If you want to prevent scrolling with mouse wheel in a single DOM element, try this:
$('#{element-id}').bind('mousewheel DOMMouseScroll', function (e) { return false; });
The DOMMouseScroll event is used in Firefox, so you have to listen on both.
I'm currently using this and it works fine. Scrolling using the bar works fine, but mouse wheel won't work.
The reason i'm doing it this way is that I have custom code to scroll the way I want, but if don't add any code it will just don't scroll on wheel.
window.addEventListener('wheel', function(e) {
e.preventDefault();
// add custom scroll code if you want
}
I need to make a webpage scrollable only by scrolling bar. I have tried to find how to catch scroll bar event, but as i see it is impossible. Currently i use this functions:
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
function wheel(e) {
preventDefault(e);
}
function disable_scroll() {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;
}
But they are not very useful in my situation, because they block all scroll events. Do you have any ideas? I am thinking about it 3 days already and i didn't find any answer (and questions also). Thanks!
Prevent the window from scrolling with mouse wheel:
As document level wheel event listeners are treated as Passive, we need to mark this event listener to be treated as Active:
window.addEventListener("wheel", e => e.preventDefault(), { passive:false })
If the content of a <div> (or other element) is scrollable, you can prevent it like this:
document.getElementById('{element-id}').onwheel = function(){ return false; }
More info about scrolling intervention and using passive listeners to improve scrolling performance.
Outdated Method:
window.onwheel = function(){ return false; } // Old Method
more info (thanks #MatthewMorrone)
jQuery solution to prevent window scrolling with mouse wheel:
$(window).bind('mousewheel DOMMouseScroll', function(event){ return false});
If you want to prevent scrolling with mouse wheel in a single DOM element, try this:
$('#{element-id}').bind('mousewheel DOMMouseScroll', function (e) { return false; });
The DOMMouseScroll event is used in Firefox, so you have to listen on both.
I'm currently using this and it works fine. Scrolling using the bar works fine, but mouse wheel won't work.
The reason i'm doing it this way is that I have custom code to scroll the way I want, but if don't add any code it will just don't scroll on wheel.
window.addEventListener('wheel', function(e) {
e.preventDefault();
// add custom scroll code if you want
}
Currently I am developing a website for ipad Safari
I used
addEventListener('touchmove', function(e) { e.preventDefault(); }, true);
to prevent the background moving when dragging the content. The problem is when I allow some element to drag
addEventListener('touchmove', function(e) {
//alert (e.target.id);
if ( e.target.className != 'issues' && e.target.id != 'dialog' && e.target.id != 'issuesBox')
e.preventDefault();
return false;
}, true);
when I drag the element, it will drag the background too , how to fix this problem? I observe that this problem may caused by taphold ,Thanks.
Are you trying to prevent scroll on some element? Prevent default of both touchstart and touchmove events then. Here's doc from apple.
In my experience, prevent default on touchstart event is enough, e.g.,
$(document).on('touchstart', function (evt) {
evt.preventDefault();
});
I'm having issues handeling some drag events... What I'm working on is a draggable control panel, and I want to disable click events during the drag. Is there a way to globally disable click events during the drag? Another issue I've found is that when someone starts the drag over a link or image the you get a psuedo-element drag of the image/link and then the control panel is stuck to the mouse because the original drag event got eat up somewhere.
any help or direction would be nice.
this is what i'm working with
dragElement.mousedown(function(event) {
sticker.css('cursor', 'move');
if ((event.button == 1 && window.event != null) || event.button == 0) {
//second catch here in case user stops drag and re-initiates drag
//without moving away from sticker
document.onselectstart = function() {
return false;
};
startDrag(event);
}
});
$(document).mousemove(function(event) {
handleDrag(event);
});
dragElement.mouseup(function() {
endDrag();
$(document).unbind('mousemove', handleDrag);
});
To the link or image elements, try to prevent their default behavior by original JavaScript
event.preventDefault(); //standard browser
or
event.returnValue=true; //IE
or just a function in jQuery for both
event.preventDefault();
I'm looking for a way to stop the middle mouse click from causing the browser to start scrolling, and showing the little scroll 'compass'.
I have seen Disabling middle click scrolling with javascript however the solution is a bit more hackey than I would like, and doesn't seem like something I could actually use.
I'm looking for a more definitive "This is how you do it" or "You cannot do that, son".
I am of course open to hacks and workarounds.
Just because S.O. questions look nicer with code, here is what I am using to close tooltips when right or middle clicking.
msg.mousedown(function(e) {
if (e.which == 2) { //middle mouse click
msg.hide();
e.preventScrolling(); //if only this worked...
}
else if (e.which == 3) { //right mouse click
msg.hide();
}
}).bind('contextmenu', function(e) {
e.preventDefault();
}).click(function(e) {
e.stopPropagation();
});
edit: jQuery, JavaScript, whatever, let's just all play nicely now :)
Edit 2:
I'm more interested in preventing the little scroll 'compass' than stopping the page from scrolling. I guess that wasn't very clear from my initial description.
Use:
$('body').mousedown(function(e){if(e.button==1)return false});
This works on Chrome: http://jsfiddle.net/PKpBN/3/
There's no need to include jQuery just for this.
If you are using jQuery, there are already some great answers here. If not, you can use vanilla JS:
document.body.onmousedown = function(e) { if (e.button === 1) return false; }
tested with the current version of firefox and chrome
document.body.onmousedown = function(e) {
if(e.button == 1) {
e.preventDefault();
return false;
}
}
Try using return false; instead of e.preventScrolling();
document.body.style.overflow=allowScroll?"":"hidden";
If you want to stop scrolling completely, here is the required code:
window.onscroll = function() {
document.body.scrollTop = 0;
}
This will effectively disable the middle button as well..