For some reason I'm having trouble trying to recognize the mousewheel event in Firefox. This is working in IE, Chrome, Safari, Opera but not FF. I am attaching an event listener on DOMMouseScroll, which should be recognized in FF.
Fiddle demo
$(document).unbind('mousewheel DOMMouseScroll').on('mousewheel DOMMouseScroll', function(e) {
var evt = event || e || window.event;
var delta = evt.detail < 0 || evt.wheelDelta > 0 ? 1 : -1;
if (delta < 0) {
// scroll down
} else {
// scroll up
}
});
Your code generates an error in the console. The line:
var evt = event || e || window.event;
is incorrect; there's no "event" variable in scope. You can just use "e" directly. The jQuery code will make sure your handler gets the event parameter as a parameter. Or:
$(document).unbind('mousewheel DOMMouseScroll').on('mousewheel DOMMouseScroll', function(evt) {
var delta = evt.detail < 0 || evt.wheelDelta > 0 ? 1 : -1;
if (delta < 0) {
// scroll down
} else {
// scroll up
}
});
This code save my life.. Works in Chrome, Firefox, Edge, Internet Explorer, Opera...
window.addEventListener('wheel', function(event){
if(event.deltaY < 0){
// wheeled up
}
else {
// wheeled down
}
});
Related
I'm making a single-page website that reacts to mouse wheel events.
var supportsWheel = false;
function DoSomething (e) {
if (e.type == "wheel") supportsWheel = true;
else if (supportsWheel) return;
var delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 10) || 1;
//if mousewheel is going up
if (delta > 0) {
slideDown();
}
//if mousewheel is going down
else if (delta < 0) {
slideUp();
}
}
document.addEventListener('wheel', DoSomething);
document.addEventListener('mousewheel', DoSomething);
document.addEventListener('DOMMouseScroll', DoSomething);
So this works perfectly in chrome and safari but in firefox, both directions of the mouse wheel activate slideDown() function. As opposed to declaring slideUp when the mouse wheel goes up and slideDown when it's going down. Any ideas how to fix it?
This is because you normalize deltaY = 0 as down, and that you probably have some smooth-scrolling set-up in Firefox, or in your OS:
This smooth scrolling feature will make your delta get linearly smaller, until they reach 0. So, when you initiate a Wheel event from your mouse/scrollpad, it will often end with an event which deltaY will be 0.
You can check this theory with this modified code, which will output the cases where the deltaY is 0 separately.
var supportsWheel = false;
function DoSomething(e) {
if (e.type == "wheel") supportsWheel = true;
else if (supportsWheel) return;
var e_delta = (e.deltaY || -e.wheelDelta || e.detail);
var delta = e_delta && ((e_delta >> 10) || 1) || 0;
if (delta > 0) {
slideDown();
} else if (delta < 0) {
slideUp();
} else if (!delta) {
donnotSlide();
}
}
document.addEventListener('wheel', DoSomething);
function slideDown() {
console.log('down');
}
function slideUp() {
console.log('up');
}
function donnotSlide() {
console.log('was zero');
}
Use your mouse wheel
But to say the truth, I don't really see why you do normalize this delta info... Usually you want to react to its values.
I have a custom script which advances a small icon upon wheel scroll. It works well but it's not advancing the element as quickly as I would like. I'd like to increase the distance that the element (pill) moves per wheel scroll. How can I alter the code to facilitate this? Thanks for any insight. Code:
function wheel(e) {
var modelContentWrapper = $('.model-content-wrapper');
var howModelWorks_steps = $('#howModelWorks_steps');
var currentIndex = $('.model-content.active', modelContentWrapper).index();
var $pill = $('.step_' + (currentIndex + 1) + ' > a.clickable-icon');
var $li = $('ul.steps li');
var $pillStep = ($li.width()) / wheelSpeed;
direction = 'right';
if ((e.wheelDelta && e.wheelDelta >= 0) || (e.detail && e.detail < 0)) {
wheelValue++;
if ((firstElement && parseInt($pill.css('margin-left')) > initialIconLeft) || (!firstElement)) {
$pill.css('margin-left', (parseInt($pill.css('margin-left')) - $pillStep) + 'rem');
}
if (wheelValue >= wheelSpeed) {
wheelValue = wheelValue - wheelSpeed;
forceModelBackward();
}
//direction = 'left';
}
else {
wheelValue--;
//direction = 'right';
if (!lastElement) {
$pill.css('margin-left', (parseInt($pill.css('margin-left')) + $pillStep) + 'rem');
}
if (Math.abs(wheelValue) == wheelSpeed) {
wheelValue = wheelValue + wheelSpeed;
forceModelForward();
}
}
//if (wheelValue > (wheelSpeed * 5) || wheelValue < (wheelSpeed * -5)) {
if (stepsCounter == 1 || stepsCounter == 4) {
enableScroll();
}
preventDefault(e);
}
Try adding the follow to your event listener..
capture: true,
passive: true
Passive Event Listeners allow you to attach un-cancelable handlers to events, letting browsers optimize around your event listeners. The browser can then, for example, keep scrolling at native speed without waiting for your event handlers to finish executing.
Usage
Probably what is used mostly:
// Really, if you're using wheel, you should instead be using the 'scroll' event,
// as it's passive by default.
document.addEventListener('wheel', (evt) => {
// ... do stuff with evt
}, true)
You’ll need to replace it with this:
document.addEventListener('wheel', (evt) => {
// ... do stuff with evt
}, {
capture: true,
passive: true
})
Copied information from alligator dot io
I have already found the solution in the accepted answer here:
How to prevent page scrolling when scrolling a DIV element?
But want also to disable scrolling the main page on keys (when div content can't be scrollable anymore).
I'm trying to make something like this but it's not working:
$( '.div-scroll' ).bind( 'keydown mousewheel DOMMouseScroll', function ( e ) {
var e0 = e.originalEvent,
delta = e0.wheelDelta || -e0.detail;
this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
e.preventDefault();
}
e.preventDefault();
});
Any ideas why?
You can stop the scrolling of the whole page by doing:
Method 1
<div onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"></div>
but it makes the browser's scrollbar disappear whenever you hover over the div.
Method 2
Else you can look at jquery-mousewheel.
var toolbox = $('#toolbox'),
height = toolbox.height(),
scrollHeight = toolbox.get(0).scrollHeight;
toolbox.off("mousewheel").on("mousewheel", function (event) {
var blockScrolling = this.scrollTop === scrollHeight - height && event.deltaY < 0 || this.scrollTop === 0 && event.deltaY > 0;
return !blockScrolling;
});
DEMO
Method 3
To stop the propagation with no plugins.
HTML
<div class="Scrollable">
<!-- A bunch of HTML here which will create scrolling -->
</div>
JS
$('.Scrollable').on('DOMMouseScroll mousewheel', function(ev) {
var $this = $(this),
scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = $this.height(),
delta = (ev.type == 'DOMMouseScroll' ?
ev.originalEvent.detail * -40 :
ev.originalEvent.wheelDelta),
up = delta > 0;
var prevent = function() {
ev.stopPropagation();
ev.preventDefault();
ev.returnValue = false;
return false;
}
if (!up && -delta > scrollHeight - height - scrollTop) {
// Scrolling down, but this will take us past the bottom.
$this.scrollTop(scrollHeight);
return prevent();
} else if (up && delta > scrollTop) {
// Scrolling up, but this will take us past the top.
$this.scrollTop(0);
return prevent();
}
});
Method 4
you can do it by canceling these interaction events:
Mouse & Touch scroll and Buttons associated with scrolling.
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
if (window.addEventListener) // older FF
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}
You need to bind document to 'keydown' event like this:
$( document ).bind( 'keydown', function (e) { ... e.preventDefault(); }
This code block the scrolling by using keys:
$(document).keydown(function(e) {
if (e.keyCode === 32 || e.keyCode === 37 || e.keyCode === 38 || e.keyCode === 39 || e.keyCode === 40) {
return false;
}
});
i'm trying to do a simple think in Fullcalendar ( 1.6.2 ) and is to simulate the prev and next button throught the mouse wheel up and down, similar to google calendar.
Here is the code i'm using, this code is from another question in here i think, but i can´t remember wich one :S
calendar.bind('mousewheel', function(event, delta) {
var view = calendar.fullCalendar('getView');
//alert(view.name); //Can retrieve the view name successfully
//alert(delta); // Undefined
//alert(event); // [Object object]
if (view.name == "month") {
if (delta > 0) {
alert(delta);
calendar.fullCalendar('prev');
}
if (delta < 0) {
alert(delta);
calendar.fullCalendar('next');
}
return false;
}
});
The problem is delta is Undefined
Anyone have a clue what i'm doing wrong? I'm very new to Jquery or Javascript
EDIT
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = [37, 38, 39, 40];
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function keydown(e)
{
for (var i = keys.length; i--;) {
if (e.keyCode === keys[i]) {
preventDefault(e);
return;
}
}
}
function wheel(e) {
preventDefault(e);
}
function disable_scroll()
{
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;
document.onkeydown = keydown;
}
function enable_scroll()
{
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = document.onkeydown = null;
}
calendar.bind(mousewheelevt, function(e)
{
var evt=window.event || e;
var delta=evt.detail ? evt.detail*(-120) : evt.wheelDelta;
if(delta > 0){
calendar.fullCalendar('next');
}
if(delta < 0){
calendar.fullCalendar('prev');
}
});
calendar.bind("mouseleave", function()
{
enable_scroll();
});
calendar.bind("mouseenter", function()
{
disable_scroll();
});
Most of this code was copied from the net i have just adapt it to my problem.
This works in Chrome ( latest version ) and I.E ( lastest version )
Doesn´t work in Firefox ( lastest version )
Didn´t check in old versions of any of them.
Can anyone see the problem of not working in FF?
I think i got it, its a bit hacky but it does the trick!!! Any constructive critics are welcome. This is now working in IE, Firefox, Chrome recent versions.
//This checks the browser in use and populates da var accordingly with the browser
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";
//Prevents the scroll event for the windows so you cant scroll the window
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
//I think this could be eliminated but in the examples i found used it
function wheel(e) {
preventDefault(e);
}
//adds the scroll event to the window
function disable_scroll(){
if (document.attachEvent) //if IE (and Opera depending on user setting)
document.attachEvent("on"+mousewheelevt, wheel);
else if (document.addEventListener) //WC3 browsers
document.addEventListener(mousewheelevt, wheel, false);
}
//removes the scroll event to the window
function enable_scroll()
{
if (document.removeEvent) //if IE (and Opera depending on user setting)
document.removeEvent("on"+mousewheelevt, wheel);
else if (document.removeEventListener) //WC3 browsers
document.removeEventListener(mousewheelevt, wheel, false);
}
//binds the scroll event to the calendar's DIV you have made
calendar.bind(mousewheelevt, function(e){
var evt = window.event || e; //window.event para Chrome e IE || 'e' para FF
var delta;
delta = evt.detail ? evt.detail*(-120) : evt.wheelDelta;
if(mousewheelevt === "DOMMouseScroll"){
delta = evt.originalEvent.detail ? evt.originalEvent.detail*(-120) : evt.wheelDelta;
}
if(delta > 0){
calendar.fullCalendar('next');
}
if(delta < 0){
calendar.fullCalendar('prev');
}
});
//hover event to disable or enable the window scroll
calendar.hover(
function(){
enable_scroll();
console.log("mouseEnter");
},
function(){
disable_scroll();
console.log("mouseLeave");
}
);
//binds to the calendar's div the mouseleave event
calendar.bind("mouseleave", function()
{
enable_scroll();
});
//binds to the calendar's div the mouseenter event
calendar.bind("mouseenter", function()
{
disable_scroll();
});
I have coding which is working in IE but not in firefox and chrome...
function handleWindowClose() {
if ((window.event.clientX < 0) || (window.event.clientY < 0))
{
event.returnValue = "Are You sure to leave this page";
}
}
window.onbeforeunload = handleWindowClose;
Can anyone help me...
window.event is a IE-only thing.
To get it to work in other browsers you have to get the event as an argument of the handler function:
function handleWindowClose(e) {
e = window.event || e;
if ((e.clientX < 0) || (e.clientY < 0))
{
e.returnValue = "Are You sure to leave this page";
}
}
window.onbeforeunload = handleWindowClose;
maybe just add mousemove handler that will store mouse position in variable
var mouse;
function storeMouse(e)
{
if(!e) e = window.event;
mouse = {clientX: e.clientX, clientX:e.clientY};
}
function test(e){
alert(mouse.clientX);
}
and use jquery?
$(window).bind('beforeunload', function() {
if (iWantTo) {
return 'Are You sure to leave this page';
}
});