Interactively scroll through div content using both horizontal and vertical movements with mouse wheel

I've created a div called 'demo' and I want it to start scrolling when it exceeds its defined size. Additionally, I would like to track the dimensions of the div so that next time I open my project, it automatically assigns those dimensions to the div.

Currently, I am manually setting double the height and width of the div. Can anyone please advise on how to achieve this? Thank you in advance.

Here is the CSS for my div:

#demo{
   top:80px;
   position: absolute;
   background-image:url(../images/bg6.jpg);
   width: 2000px;
   height: 1500px;
   overflow: auto;
   overflow-y: scroll;
}
javascriptjquerycsshtml

Answer №1

To make the div stay fixed on the screen, you don't have to keep track of scrolling. Simply set it as fixed:

#demo{
   top:80px;position: fixed;
   ...
}

"I also want to remember the height and width of the div so that it is the same next time I reopen my project"

To save those values, you have a few options:

  • Database: By using a php file, you can save the size associated with a user account or login.
  • Cookies: This is the simplest method, but the data won't be available on other devices and will be deleted if the browser cache is cleared.
  • HTML5: The HTML5 API offers methods for storing data as well.

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

What is the most efficient method for assigning a JSON array?

let vehicles = [{"x":1,"y":2},{"y":3,"z":5}]; let temporary=[]; [...vehicles].map((item)=>{ temporary.push(item) }) temporary[0]["x"]=3 console.log(vehicles[0]["x"]) // output -> 3`enter code here` How can we prevent the values in the vehicles arra ...

javascriptarraysjsonreactjsreact-native

Is the synchronicity problem causing a bug in my JavaScript code?

Steps to Reproduce the Issue: Go to Enter sMqNFAU0tOw (or any other Youtube video ID) in the Video Playlist Click on Play Videos! The JavaScript console should display an error message like Uncaught TypeError: undefined is not a function This error is ...

javascriptyoutube

There is a slight gap between the svg element and the path

Here is the size of my path tag (g tag is same size) https://i.sstatic.net/Huk8j.png This is the size of my SVG tag https://i.sstatic.net/VBXQi.png There is a gap between them. These are the inline attributes... <svg preserveAspectRatio="none" cla ...

htmlcsssvg

The navigation bar has surpassed the content limit and overflow-y is visible

My website has a navigation bar with content that exceeds the desired limit, and I want the rest of the content to be shown in overflow-y. However, an issue arises when hovering over the content, as the content is displayed (likely due to fixing min-heigh ...

htmlcsssass

My Node.js code has encountered an unexpected end of input error

const express = require("express"); const bodyParser = require("body-parser"); const ejs = require("ejs"); const mongoose = require('mongoose'); const app = express(); app.set('view engine', 'ejs'); app.use(bodyParser.url ...

javascriptnode.jsexpress

Using an HTML ellipsis without setting a specific width

I am working on achieving a specific layout as shown in the screenshot below. If both SPAN and B fit within the box, they should be displayed one after another. If they do not fit, SPAN should have an ellipsis while B is fully displayed (never larger tha ...

htmlcsshtml-tablewkhtmltopdfellipsis

Having issues deciphering JSON data in Perl

Trying to send JSON data using Ajax and Jquery to a Perl script, but having trouble reading the data back in Perl. Seeking assistance to identify any issues or missing elements in the code provided below. The Ajax call does not display the success or erro ...

jqueryajaxjsonperl

CreateAsyncModule using an import statement from a variable

When trying to load a component using defineAsyncComponent, the component name that should be rendered is retrieved from the backend. I have created a function specifically for loading the component. const defineAsyncComponentByName = (componentName: strin ...

javascripttypescriptvue.jsvuejs3vite

What is the best way to adjust the size of a button using CSS within a ReactJS

I am facing an issue where I need to create a button with a specific width, but the template I'm using already has predefined styles for buttons. When I try to customize the button's style, nothing seems to change. Below is the code snippet: Her ...

javascriptcssreactjs

Creating a Scrollbar within a Bootstrap Dropdown: a Complete Guide

Is there a way to create a scrollbar within a bootstrap 4 dropdown selection? I am facing an issue where the dropdown does not fully load when there are too many files. My solution is to display only 5 files when the dropdown is clicked and include a scrol ...

htmlcssdrop-down-menubootstrap-4

Validate and submit form using mootools when a link is clicked

Is there a way to validate my form and submit it when a link is clicked? I have included my code below: new Element('a',{ 'html': "To cart", 'class': 'shop ...

htmleventsmootoolsanchorform-submit

Is there a way to apply the $(document).ready(function() to multiple inputs at once?

As a newcomer to JavaScript/jQuery, I am working on a form that contains 4 date selections using DatePicker. Even though the settings for all 4 date selections are the same, I attempted to use dp1 for all of them, but unfortunately, it did not work. While ...

javascriptjqueryfullcalendar

The modal is functioning properly on Firefox and Internet Explorer, but it is experiencing issues

Having an issue with my modal not functioning properly in Chrome. When I click on it, only the background fades and both the before and after content load in the Chrome Dev tools simultaneously with no visible content in between. Here is a link to the Cod ...

javascriptcssmodal-dialog

Firefox does not support CSS transitions

I've put in a lot of effort and even tried searching on Google, but I'm unable to find a solution to my problem: To help you understand my issue better, I have created a jsfiddle with my source code: Click here to view my Source Code Although e ...

htmlcssfirefoxtransition

Chapter on how to generate a new bootstrap row for every pair of elements in Angular

I am facing a challenge with adding a row after every 2 elements in an ngFor loop. I have an array called studentNames which looks like this: studentNames=[ { name:"Jonas", age:22, number:"1234" }, { name:"Mathil ...

javascripthtmlangulartypescriptngfor

The CSS content property within a style element prevents the dragging of elements

Is it possible to make an element with content draggable in HTML while changing the image through replacing the style of the element? I am trying to insert a picture using the content style tag, but it seems to make the element lose its draggable ability. ...

htmlcssdrag-and-dropdraggable

Issues with ellipses not functioning properly have been identified specifically on Safari when using the line

Currently, I am using the line-clamp feature to restrict the titles on a blog to only two lines at most. This functionality works perfectly fine on Firefox and Chrome browsers; however, when it comes to Safari, the ellipsis appears in the middle of the sen ...

csssafari

The event handler on line 72 triggered an error that was not handled, resulting in an error message indicating a permission issue on OpenShift: "Error: cannot listen for connections

I have been working on creating a basic chat app. Initially, it was running smoothly on localhost:3000/chat.html. However, upon deployment on OpenShift, I encountered a crash accompanied by the following error message (as seen after running rhc tail): UPD ...

javascriptnode.jsexpressdeploymentopenshift

What is the best way to send this JavaScript array to my MVC 3 controller?

When I try to access the controller, I am encountering null values. I can't seem to figure out what's causing this issue. In my grid, there is a list of guests with names and emails, from which users can select guests using checkboxes. I then e ...

jqueryajaxjsonasp.net-mvc-3

Issue with MongoDB: Accurate date stored but not displayed properly in Views (EJS)

Within a form, users are prompted to input a date which is then stored in a Mongo DB. Upon checking the console log, the date appears correct (in ISODate("2017-05-21T00:00:00Z")). However, when this date is passed as an argument in EJS, the displayed date ...

javascriptmongodbmomentjsejs