Relay the wheel event passing through a scrolling container to the window

Issue

I am facing an issue with a horizontally scrollable element (using overflow-x: scroll;). When I hover over the element and use the mouse wheel to scroll vertically, nothing happens because the scrollable element captures the mousewheel event.

My goal is to have the mouse wheel scrolling on that element to actually scroll the window up/down instead of being captured by the scrollable element.

Potential Solutions

One approach I attempted was using the wheel event and preventing the default action for vertical scrolling, but it had no effect.

Another idea involved capturing the deltaY value from the scroll event and manually scrolling the window using window.scrollTo(). However, I am concerned that different browsers and operating systems may handle scrolling differently, making it difficult to replicate the behavior consistently across all platforms.

A last resort option would be implementing the scroll behavior manually with a specialized scrolling library rather than relying on browser functionality.

Question

Is there a way to somehow pass on the wheel event to the parent (window) in this scenario?

javascripthtmlcsseventsscroll

Answer №1

To prevent vertical scrolling, you simply need to specify that the element should not listen to it. By default, the property is set to visible, with an exception:

When one axis is set to visible (the default) and the other to a different value, the visible setting behaves like auto. (MDN Webdocs)

This means that in order to achieve the desired behavior, you must explicitly declare overflow-y: hidden.

body{
  height: 1000px;
}
#outer{
  width: 200px;
  height: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
}
#hscroll{
  width: 500px;
  height: 500px;
 }
<div id="outer"><div id='hscroll'><p>Scrollme</p></div></div>

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

Retrieve image from local JavaScript file

Currently, I have integrated a JS file into my project with the following slider data: export const sliderData = [ { "id": 1, "name": "Horse", "brand": "Ferrrari", " ...

javascriptreactjsarrayscreate-react-app

Can you explain the process of sending an AJAX request and managing it on a web server coded in C?

Could someone please provide an example of an AJAX request that retrieves a global variable stored on a webserver written in C? I am unfamiliar with JQuery and AJAX, so I would appreciate any guidance on how to accomplish this task. Thank you in advance ...

javascriptjquerycajax

Sequential number matching with regex in Jquery

Recently, I've been working on implementing the keyup function for search after fetching data from a database. After searching through various questions, I found a regex expression for matching numbers in a specific order: Regex for numbers only The ...

javascriptjqueryindexing

Struggling to successfully transmit my form information to my email

I've been trying to figure out how to get the information submitted through the form on my website sent to my email, but I can't seem to make it work... Here's what I have in my email.php file: <?php $EmailFrom = "<a href="/cdn-cgi/ ...

phphtmlformsemail

Toggle the visibility of a div and reset the input field when there is a change

In my form, I have two input fields named 'Apartment' and 'Bachelor'. Depending on the selected value, certain divs will be shown. If 'Apartment' is selected, related divs and select fields for apartments should show. The issu ...

javascriptjquerycss

Unable to click on Bootstrap 3 modal within navbar on iOS devices

Visit this website: . You'll notice there is a reservation widget displayed within a modal. Interestingly, in iOS, clicking on the "reserve" link in the navigation bar doesn't open the modal. However, if you click on the "Reservations" link on th ...

jqueryhtmlioscsstwitter-bootstrap

The excessive number of events from running threads is causing a delay in the

My program is designed to analyze data files, triggering an event each time a line in the file is parsed to provide real-time progress updates. The analysis process runs on separate threads from the user interface (UI) thread, with the UI thread handling t ...

.netmultithreadingevents

What is the best way to create a keyup event for the entire document except for one specific element?

Looking for some advice on how to handle a specific code scenario. Here's what I have: $(document).ready(function(){ $(document).on("keyup",function(e){myFunction(e)}); }); function myFunction(e){ console.log("hi"); } In ...

javascriptjquery

Generating a 2D array in Typescript, leaving it empty initially, and then adding values at various locations

I am attempting to create an empty 2D array but encountering an issue where I receive an error stating "cannot set property of undefined". My approach involves dynamically determining the size of the array and populating it with different DOM objects at ...

javascriptarraysangulartypescriptdom

Utilizing Node.js to display MySQL (npm) pool data on an HTML or Jade page

We have been attempting to fetch data from a MySQL database in order to display it in an HTML/Jade format. However, we are facing difficulties when trying to show the records on an HTML table. As we are utilizing the MySQL pool, our task has become more c ...

javascripthtmlmysqlnode.jsexpress

Is there a way for me to retrieve the submitbuttonnextstatusid value from a generated HTML by targeting the input tag with the id of "submitbutton"?

Can someone help me figure out how to extract the value of submitbuttonnextstatusid from a rendered HTML that contains an input tag with the id "submitbutton"? Here is an example of the HTML I am dealing with and I specifically need to retrieve the value ...

javascriptjquery

Stretching background images on iOS mobile devices

My background is causing issues on iOS devices by stretching only when there is content added to a page like this. However, it loads correctly on empty pages like this. I have tried adding background-attachment:scroll instead of background-size: cover to ...

ioscssimagemobilebackground

What is causing the issue with my CSS keyframe animation not functioning correctly when using `animation-direction: reverse`?

Exploring the use of animation-direction: reverse to streamline my CSS keyframe animation process. An interesting scenario arises when a container div is clicked, toggling an "active" class using jQuery to trigger the animation in either forward or backwar ...

csscss-animations

Tips for transferring information from the server to the client using Express

I am working on creating a webpage for my website that displays the names of all users. However, I am facing an issue with the fetch() function when trying to retrieve data from the server. <!DOCTYPE HTML> <html lang="en"> <head> ...

javascriptnode.jsexpressbackend

Issue with Ajax request not functioning properly upon reloading the page

My home page is designed in PHP and includes checkboxes for the brand and store list. At the end, there's a submit button provided below. <html> <head> <title>Insert title here</title> <script src="http://ajax.googleapis.co ...

javascriptphpjqueryhtmlajax

jQuery live function is not functioning as anticipated

I am facing issues with ajax requests and simple <input type="submit"/>. I have a practice of loading views within other views, in a modular way, using jQuery's .load(url) function to move from one view to another. The problem arises when I loa ...

javascriptjqueryajaxloadlive

Alter the color of a jstree node using JSON

My jstree is bound to JSON format retrieved from a web service. I would like to programmatically change the color of nodes. $("#divCourseTree").jstree({ 'core': { 'data': { ...

javascriptasp.netjsonjstree

Function to easily initialize by clicking a button

I am attempting to streamline the initialization process for JQuery Ajax buttons. The following code works perfectly: $(document).ready(function(){ $("#home").click(function(e){ e.preventDefault(); $.ajax({ type: "GET", url: "/", ...

javascriptjqueryajax

Adding style tags dynamically to a component and then encapsulating the styles again (using Angular)

Currently, I am in the process of upgrading from AngularJS to Angular. Our app is currently a hybrid one being bundled up with webpack instead of just angular cli. Due to this setup, we have encountered issues where our css or scss files are not correctly ...

javascriptcssangularangular-templateangular2viewencapsulation

Solution: "The Mongoose Model.find method consistently provides an empty result set."

Currently, I am utilizing mongoose in combination with next.js to interact with an existing collection. Despite the collection not being empty, the mongoose model.find() function consistently returns an empty array. Below is my model code: const mongoose ...

javascriptnode.jsmongodbmongoosenext.js