What's the reason for the mousewheel functioning in Chrome but not in Firefox?

I am currently using CSS to enable scrolling up and down a popup page with just the mousewheel, but I'm facing an issue with it not working in FireFox. Surprisingly, it works fine in Chrome with the use of overflow-x:hidden; and overflow-y:auto; properties.

I attempted to utilize the jQuery Mousewheel Plugin jquery.mousewheel.min.js to achieve a scrollbar-free scrolling experience within a page, but unfortunately, I couldn't get it to work. Is there something specific that FireFox requires in order to allow scrolling up and down a page solely using the mousewheel? Perhaps some tweaking in CSS, Javascript, or jQuery is needed?

HTML

<div class="test">
   <div class="inner">blah blah blah
   </div>
</div>

CSS

.test{
display:inline-block;
overflow-x:hidden;
overflow-y:auto;
margin:0 auto;
}

.inner{
float:left;
overflow-x:hidden;
overflow-y:auto;
}
javascriptjquerycss

Answer №1

In the realm of managing the mousewheel event using vanilla JavaScript, it's worth noting that Firefox uses a different identifier for it: DOMMouseScroll. To account for this discrepancy and catch the event universally, you can implement something along these lines:

if (document.addEventListener) {
    document.addEventListener("mousewheel", MouseWheelHandler, false);
    document.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
else {
    document.attachEvent("onmousewheel", MouseWheelHandler);
}   

function MouseWheelHandler(e) {

    var e = window.event || e;
    var delta = e.wheelDelta

    if (delta < 0) {
        // Execute code when wheel is scrolled down
    } else {
        // Execute code when wheel is scrolled up    
    }
}

Answer №2

In your previous message, you mentioned experimenting with the jQuery mousewheel plugin without sharing any JavaScript code. Are you attempting to scroll an element programmatically using DOM event listeners? Keep in mind that Chrome only recently added support for the standard 'wheel' event (https://code.google.com/p/chromium/issues/detail?id=227454), so you may need to resort to the nonstandard 'mousewheel' event.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

loading a module's dependencies seamlessly with RequireJS

Currently, I am working with Knockout and Require in my project. I have isolated some Knockout handlers into a separate module that I want to utilize. While there is no specific JavaScript code relying on this module, it is referenced in the data-bind attr ...

javascriptknockout.jsrequirejs

How to transfer data from JavaScript to PHP using AJAX

After spending countless hours attempting to make this function properly, I have come to you for assistance :) I have created a PHP page that can exhibit files from a server. I am able to modify the files using an editor plugin, where the Textarea tag is ...

javascriptphpajaxvariables

Get the object method within an AJAX success callback

Is there a way for me to access the FileUploader.prototype.saveImage() method in my code? Here is an example snippet: function FileUploader(object) { this.checkInputs(object); if (this.isImageSelected()) { this.beforeInit(object); ...

javascriptjqueryajax

Indigenous web browser authentication request

Is there a method to activate the default browser login prompt UI (using PHP or jQuery) and retrieve the information entered by the user before the browser attempts to authenticate through its own means? https://i.stack.imgur.com/RerhN.png The resources ...

phpjquery

What is the best way to create a mapping function in JavaScript/TypeScript that accepts multiple dynamic variables as parameters?

Explaining my current situation might be a bit challenging. Essentially, I'm utilizing AWS Dynamodb to execute queries and aiming to present them in a chart using NGX-Charts in Angular4. The data that needs to appear in the chart should follow this fo ...

javascriptarraystypescriptpromisemap-function

Having trouble with installing node-steam on your node.js server?

I recently attempted to install node-steam and encountered a significant error. Can anyone provide guidance on how to resolve this issue? Is the mistake on my end? ... gyp ERR! configure error gyp ERR! stack Error: Can't find Python ex ...

javascriptnode.jsnpmsteam

Cached images do not trigger the OnLoad event

Is there a way to monitor the load event of my images? Here's my current approach. export const Picture: FC<PictureProps> = ({ src, imgCls, picCls, lazy, alt: initialAlt, onLoad, onClick, style }) => { const alt = useMemo(() => initial ...

javascriptreactjstypescripteventsnext.js

Troubleshooting a Cache Issue in Your Next.js Application

Whenever I attempt to run 'npm run build', an error crops up that seems to be linked to the css and fonts. Unfortunately, I am unsure of how to tackle this problem. It's perplexing as the app functions perfectly fine in development mode. Th ...

csswebpackcachingnext.jsfonts

Tips for positioning a div within a grid:

Looking for help with displaying news on your CMS page? You may have encountered an issue trying to show the title and content in two columns within a row. Here is some CSS code that might guide you in the right direction: *{ margin:0; padding:0; ...

htmlcss

Implementing AJAX to populate a dropdown list: A step-by-step guide

I have a question about populating options in a select dropdown using AJAX. Can you spot any errors in my code? Below is the snippet from my View: $(function() { $.getJSON("Animes/GetCategories", null, function(data) { var options = '&a ...

c#jqueryajaxmodel-view-controller

Webpack attempting to load build.js from a nested folder

I am in the process of setting up a Vue app with Vuetify and Vue Router. Everything works fine when I load the base URL "/", and I can easily navigate to /manage/products. However, if I try to directly access /manage/products by typing it into the address ...

javascriptwebpackvue.jsvue-routervuetify.js

The inlineNav edit button is experiencing errors when used in conjunction with the multiselect feature in

My multiselect inline editable jqGrid with inlineNav is encountering some issues. The problem arises when following these steps: Click on the add button to display an empty record in the grid, add data, and save it. Select that record using the checkbox. ...

jqueryjqgrid

Broaden the capabilities of Kendo MultiSelect

I am currently working on creating a customized kendo multi-select widget by extending the existing one. The aim is to display the tag list in a div below the input field. My objective with this code is to show the tag list in a separate div upon the sele ...

jquerykendo-uikendo-multiselect

Tips for ensuring that a JavaScript program does not get blocked by other API calls

My JavaScript API currently has limitations that prevent other APIs from being called or allowing the API to call itself while running. The API involves sleeping for a specific duration, during which I would like other API calls to be made as well. I have ...

javascriptnode.jsexpress

Arrange the keys of a map in ascending order, prioritizing special characters and their precedence

JavaScript ES6 Map Example: const map = new Map(); map.set('first', ['1', '2']); map.set('second', ['abc', 'def']); map.set('_third', []); map.set(')(*', []); map.set('he ...

javascriptobject

Bootstrap sticky footer with adjustable height

Striving to achieve a sticky footer with a custom height on my website has turned out to be more challenging than I initially expected. Presented below is a snapshot of the current state of my footer: The issue arises where my contact form is concealed b ...

htmlcsstwitter-bootstrapfootersticky

Integrate ruby code within a javascript string

I am looking to insert tfx-<%= @doc.doc[:b].metadata['filename']} %> into a JavaScript string called 'url' url = "<%= @document.doc[:a].url(response_content_disposition: ContentDisposition.attachment( [INSERT HERE] )) %>"; ...

javascriptrubyembedded-ruby

Create a global variable by importing an external module in TypeScript

I am currently developing a TypeScript npm module called https://www.npmjs.com/package/html2commonmark. This module is versatile and can be utilized in nodejs (via require) as well as in the browser (by loading node_modules/html2commonmark/dist/client/bund ...

javascriptnode.jstypescripttypescript1.7

The proper way to close file descriptors on a terminated HTTP connection in a Node.js environment

I am currently experimenting with Node.js, where I am attempting to stream files from the filesystem over HTTP. However, my experience on an OS X Lion machine has been hindered by a buggy Apache Bench (ab) app that prematurely aborts connections. This issu ...

javascripthttpnode.js

How can I display a Bootstrap modal in Ember.js after rendering it in an outlet?

I'm facing a challenge in my Ember.js application where I need to trigger the opening of a Bootstrap modal from my ApplicationRoute upon calling the openModal action. This is what my ApplicationRoute looks like: module.exports = Em.Route.extend({ ...

javascripttwitter-bootstrapember.js