Tips for scrolling a div by using its child element

Within this div, there is an image and another div. The height of the image exceeds the height of its parent div, and the child div's position is fixed.
Is it impossible to scroll the parent div when using the mousewheel on the child div?

To debug this issue, you can access the jsfiddler here: jsfiddler

Answer №1

Adjust the layout by switching the position property from fixed to absolute within the .map section. Here is an example:

.map{width:500px;height:300px;position:absolute;left:0;top:0;background:#ccc;}

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

Having an issue with my Django model not properly saving data when receiving a POST

Just dipping my toes into the world of ajax and Django, so please bear with me for my messy code. I'm facing an issue where my Django model is not saving the response even after receiving a POST request. I'm attempting to create a simple like/di ...

Troubleshooting Problem with Scrolling Sticky Element on iOS Devices

This is specifically for mobile devices I am facing an issue with a relative positioned element where it should become fixed to the top of the screen when the scroll position exceeds the top position of the element. However, in iOS, when scrolling, the f ...

Extracting the month and year from a datetime string: A simple guide

I am working with a JSON object that includes a field called Month with a string datetime value- { Month : "31-Jan-2022 12:00 AM (EST)" .... .... } Is there a way to extract the Month Name and Year from this string using JavaScript's dat ...

How to transform a file into a uInt8Array using Angular

Looking to implement a feature where I can easily upload files from Angular to PostgreSQL using a Golang API. In my Angular component, I need to convert my file into a uInt8Array. I have managed to convert the array, but it seems to be encapsulated in som ...

Troubleshooting AJAX GET requests in CakePHP

I'm facing some issues with implementing AJAX POST or GET in my CAKEPHP site. I am attempting to create an autocomplete feature, but I am unable to send or retrieve data using AJAX. Although I can achieve autocomplete functionality using tags, I am st ...

What is the best way to center the text in the middle of a flex container?

I am struggling with the alignment of elements in my code. Here is what I currently have: HTML: </div class="container"> <footer>Maximilian Crosby ©</footer> </div> <div class="bot-bar" > <a href="./contact-u ...

Trigger Google Analytics event when file is downloaded from server

Here is a helpful resource on sending events to Google Analytics via API server sided: Send event to Google Analytics using API server sided An email containing a download link has been sent to a customer: Hello, Please access your product through thi ...

What is the proper functionality of the data-bs-toggle attribute in Bootstrap 5?

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="424147474c4a4a4c5f7e79777a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq ...

JavaScript: Changing the names of all object keys

As a beginner, I am struggling to rename some objects in my key using a map function. Below is my current array: "platforms": [ { "id": 6, "name": "PC (Microsoft Windows)" }, { "id": 11, "na ...

What is the method for retrieving the angular global in an Ionic 2 application?

I'm attempting to use the angular.equals(some_object, {}) function within an Ionic 2/3 application, but it's unable to locate the identifier angular. My goal is to determine if an object is empty using Angular's built-in equals method. Does ...

Submitting a multipart form via AJAX from a textarea and input fields

After attempting numerous JS codes to submit a form with multiple pieces of data (2 files and 1 textarea), I have not found a solution that works effectively. So, how can we use AJAX to send form data that is not empty to PHP? <form method="post" enct ...

Mandating the inclusion of a directives controller in conjunction with other necessary controllers

Two directives are nested within each other, with one requiring the other using require: '^parentTag' . Both directives have their own controllers. In the parent directive, I can access its controller as the fourth argument in link: function(scop ...

Create animations for SVG paths and polygons that move along specified paths

I am trying to animate both a path and a polygon in an SVG arrow along the same path. Currently, I have successfully animated the path using CSS, but I am struggling to figure out how to move the polygon along the path at the same pace. <svg id="La ...

I am attempting to create a skybox, yet it seems like I am overlooking a crucial element

Currently, I am attempting to create a skybox but have encountered difficulties with various tutorials. Initially, I tried to use an array approach to pass parameters for the material based on a previous example, but it seems that the method has been updat ...

What are some creative ways to incorporate text into a slider design?

I have a box with 3 links and a fontawesome icon in my code snippet. I want to be able to click on the font icon and make the content slide. Initially, only three links should be shown, but when I click on the arrow, it should display the other icons. When ...

Is there a way to ensure that both new Date() and new Date("yyyy-mm-dd hh:mm:ss") are initialized with the same timezone?

When utilizing both constructors, I noticed that they generate with different timezones. Ideally, they should be in the same timezone to ensure accurate calculations between them. I attempted to manually parse today's date and time, but this feels li ...

Managing simultaneous asynchronous updates to the local state

There is a scenario where a series of asynchronous calls are made that read from a local state S, perform certain computations based on its current value, and return an updated value of the local state S'. All these operations occur at runtime, with ...

Looking to customize a jQuery modal window by having a Three.js canvas fill the entire width?

My concern revolves around the space occupied by a THREE.js canvas that I have inserted into a jQuery modal window. Initially, I created my code with the THREE.js canvas occupying the entire browser window without using any div elements. Here is a screens ...

Refreshing the images array in the DOM using ajax technology

I have a webpage with various images scattered under a table, like in the example of homepage.htm: <table id="imagesTable"> <tr> <td> <img src="img1.png"> <div> <img src= ...

Send the text information from the drop-down menu

Does anyone know how I can transfer the selected text from each select box to its corresponding (textbox)? The select boxes contain integer IDs, and I want to save the text of each selected option to a database. I'm having trouble with my script for ...