Currently, there is a full-page scrollable background image with a div positioned at the bottom of the page. However, I am facing an issue where I can only scroll the image when the mouse-pointer is hovering over it and not over the bottom div. Is there a solution to make the image scrollable from any point on the page?
To better illustrate my current setup and the desired functionality, you can refer to this JSfiddle.
Given that #bottom is located outside of the scrolling area, a bit of JavaScript will be necessary.
To accomplish this, consider using the following code snippet:
const image = document.getElementById('image')
const bottom = document.getElementById('bottom')
function handleBottomScroll(event) {
event.preventDefault();
image.scrollTop = image.scrollTop - event.wheelDeltaY
}
bottom.addEventListener('wheel', handleBottomScroll)
Explore the JSFiddle example here: https://jsfiddle.net/uniqueusername/gdwzp1t4/7/
To prevent scrolling, you can use the CSS property pointer-events: none; on the element with the class .bottom. Here is an example of how it could be implemented:
body {
margin: 0;
}
.main {
--bottom-height: 100px;
width: 450px;
height: 100vh;
position: relative;
}
.bottom {
background-color: red;
position: absolute;
height: var(--bottom-height);
inset: auto 0 0;
pointer-events: none;
}
.image {
overflow: auto;
position: absolute;
inset: 0;
padding-bottom: var(--bottom-height);
}
.image img {
width: 100%;
height: calc(100% + var(--bottom-height));
object-fit: cover;
display: block;
}<div class="main">
<div class="image">
<img src="https://images.unsplash.com/photo-1684010850063-add4e5fec6a7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60" />
</div>
<div class="bottom">
This section will not scroll when the mouse hovers over it. How can this behavior be changed?
</div>
</div>My goal is to design a table with a fixed header that allows the body to scroll under the header. While this is a common design, I am facing the challenge of implementing sticky subheaders. These subheaders should scroll along with the table until they rea ...
Why are my load times extremely slow for such a small site? I had hoped to display an image before the video loads, but they both seem to load simultaneously, even if the video takes forever to load. This is my HTML: <div id="bigvid"> <div cla ...
Greetings, I found it quite unexpected that there is a lack of information available on the functionalities of the getRequestHandler and render functions within the next package. As I am in the process of setting up a custom server, I am curious about wh ...
I am in the process of developing a User model that requires a unique username. Below is the code snippet for the model: var mongoose = require("mongoose"); var Schema = mongoose.Schema; var UserSchema = new Schema({ username: String, password: ...
As an aspiring programmer, I am seeking assistance in understanding how to upload a local text file to a textarea within a website that I am currently developing. My expertise lies in HTML/CSS, with a good grasp of Javascript/JQuery, and I am in the proces ...
Struggling with a challenging coding problem, I am completely stumped on how to make it work. function(obj) { if ( (obj < 10) && (obj > 10) ) { return true; } } I've attempted various solutions such as manipulating the varia ...
In order to create a unique experience for mobile users, I have implemented multiple images for my navigation bar menu icon toggle button. These images are stored in an array and a random image is selected each time the page loads using Math.Random. Howeve ...
Is there a method to verify the correctness of a yaml file's syntax and data before uploading it to a server? ...
I am currently using the Vue framework to work on printing webpages for my application. I have an issue that needs a solution, which I will explain below. <template> <div id = "intro" style = "text-align:center;"> <div ...
I've got some data in JSON format that I've converted into an HTML table. Now, my goal is to update the text from False to True if a checkbox is checked. How can I achieve this? Below is the code used to create the HTML table: $.each(result, fu ...
How can I perform an in-depth regex search in MongoDB using a JavaScript function within the query? Here's an example: db.collection.find( {$where: function() { function deepIterate(obj, value) { var new_value = new RegExp("^"+ ...
e.target.parentNode will return this element. <div class="quantity"> <span class="glyphicon glyphicon-minus-sign"></span> <span class="product_Count"> 4 </span> <spa ...
Is there a way I can organize my website to display 3 movies per row with the text centered relative to the image? Here is how it currently looks (the red box is just for reference, please ignore): https://i.stack.imgur.com/w2pgN.jpg Also, when I resize m ...
Hey there everyone, I'm currently working with Nuxt3 and encountering an error when trying to access the robot.txt file. Here's the Robot.txt module that I've integrated. Within my nuxt.config.ts file: export default defineNuxtConfig({ ...
In my index.html page, I have two divs where I load different content into each one by selecting the div and injecting the content using jQuery. As a result, each div ends up with a horizontal scrollbar to display its content. My goal is to synchronize the ...
I'm encountering some difficulties setting up PrimeNG correctly to utilize its rich text editor. Despite installing all the necessary components, it's still not functioning as expected. https://i.stack.imgur.com/4kdGf.png This is my package.jso ...
Currently facing a test challenge: import { convertHeicToPng } from './heicUtils'; class Employee { url: string; onmessage: (m?: any) => void; constructor(stringUrl: string) { this.url = stringUrl; this.onmessage = () => {}; ...
My video is not auto-playing. The same code works when placed in a different file, but it's not working on my page. Can anyone help with this issue? The URL where the video is not autoplaying: I have tried everything I can think of to get it working ...
I'm working on an angular js controller with a json array that organizes countries by continents. Each continent consists of its own array of countries. //CONTROLLER app.controller('CountryController', function(){ this.continents = ...
I am currently working on a game using HTML/Javascript with Three.js. One of the key features I have implemented is moving the road and allowing the camera to move as if it were attached to a car controlled by arrow keys. Now, my next challenge is to give ...