determine the vertical scroll position within a designated container

I'm currently working on an animated svg project and I am faced with the task of determining the scroll position within my div element. Previously, I used some code that I found on a tutorial from w3schools

However, what I really need is for the scroll calculation to start when it reaches my specific div element. Below is the code snippet that I have come up with:

var scrollpercent =
 (document.body.scrollTop + document.documentElement.scrollTop) / 
 (document.documentElement.scrollHeight - document.documentElement.clientHeight);


 console.log($(".svg-container").scrollTop())

I attempted to utilize svg-container.scrollTop(), but it consistently returns 0.

javascriptsvg

Answer №1

Trying to retrieve scroll positions can sometimes be a daunting task. If you're in need of finding out where an element is located on the screen, you can utilize the element.getBoundingClientRect() method.

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

// rect represents a DOMRect object containing properties such as left, top, right, bottom, x, y, width, and height
var rect = $(".svg-container")[0].getBoundingClientRect();

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

variety of provider setups available in Angular

Trying to learn Angular from various online sources can be quite confusing, as different people use different patterns when writing functions. Can someone please explain the .provider concept in Angular? I have experimented with the .provider method using ...

javascriptangularjsangular-providers

Place the div in an absolute position relative to the body, not its

I am facing a challenge with positioning multiple child divs to the body element using absolute positioning. Unfortunately, I cannot use `position: absolute` because the divs are not direct children of the body. Using `position: fixed` is also not an opt ...

javascriptjqueryhtml

Is there a way to access the HTML and CSS source code without using the inspect feature

I'm working on a project that involves an "edit box" where users can write text, add emojis, change the background color, insert images, and more. After users finish creating their content, I want them to be able to send it via email. This means I ne ...

javascripthtmlcss

Solving the conundrum of sending a Javascript date object (formatted datetime) through Laravel API

When my Laravel 5 API fetches datetime columns from my MySQL database, the JSON output is in this format: 2015-08-13 13:45:00 However, the widget that reads this JSON data expects a JavaScript Date Object. How can I convert my datetime to a JavaScript Da ...

javascriptphpdatetimelaravel

How can we maintain the existing values of fields when using findOneAndUpdate() without replacing them with null if no new value is provided?

When updating values, the user can choose to update specific fields. However, if only { name: "new name" } is passed in, the email and password fields are also updated but set to "null". Is there a way to update only the fields provided in req.body and le ...

javascriptnode.jsmongodbmongoosenosql

The entire component is not displayed in Vue

Just starting out with Vue. I'm looking to create a component that encompasses the entire page except for the header and footer Vue.component('main-block', {template: ` <section id="first-block">...</section> <secti ...

javascriptvue.js

Incorporating the "+ " icon in Vuejs Dropzone to indicate the presence of existing images

Looking to enhance my Vue-dropzone file uploader component by adding an icon or button labeled "Add more images" when there are already images present in the dropzone. This will help users understand that they can upload multiple photos. Any suggestions on ...

javascriptvue.jsvue-componentdropzone.js

Is it possible to access global variables within a composable function?

I am currently in the process of transitioning a project from Vue 2 options API to Vue 3 composition API. Within an options API component, there is a variable named componentData. I am calling a mixin from this component, which allows me to access all the ...

javascriptvue.jsvuejs3vue-composition-api

Issue: Content Security Policy Restrictions Prevented Resource from Loading

I'm currently in the process of transferring a basic program I developed using jQuery/HTML to a Firefox WebExtension for easier deployment. The issue I'm encountering is as follows: Content Security Policy: The page’s settings prevented the lo ...

javascripthtmlfirefox-addon-webextensions

Troubleshooting issue with Bootstrap's responsive scrollspy functionality

I am experiencing an issue with the responsiveness of my page. When I reduce the width of the page to half, the scrollspy disappears unexpectedly. I am unsure about the root cause of this problem. If you run the code I have shared here, you can observe th ...

javascripthtmlcssbootstrap-4

When I try to run "npm start" with node-webkit, it seems like the script specified in my package.json manifest file is not being

After running npm start in the terminal, I encountered the following error message: PS C:\Users\finsa\OneDrive\Documents\UNI\Web Development\NS_Music_App> npm start > <a href="/cdn-cgi/l/email-protection" class= ...

javascriptnode.jsnpmnode-webkit

What is the reason behind the blocking of Ajax GET requests without CORS, while JSONP requests are permitted?

Accessing any page on the web through a GET request using HTML tags from a different origin is possible: <script src="http://example.com/user/post?txt=sample"></script> XHR requests to other origins are blocked for security reasons. For examp ...

javascriptajaxsecuritycors

The colors in Material UI are chosen from the primary palette depending on the theme mode selected

When using mui react, I am looking to apply colors from my theme's primary palette to some non-material ui custom components created with div elements. Currently, I can utilize theme.palette.primary.main or the .light shades directly, as well as them ...

javascriptreactjsmaterial-ui

The system has removed all content within the fields

I have created a code to generate a dynamic table. The problem I am facing is that when there are multiple rows in the table, clicking on the delete button deletes all field values instead of just deleting the data for the specific row where the delete b ...

javascriptjqueryhtml

Troubleshooting a Browser Pop-up Opening Issue with Anchor Tags

displayResident = '<a href="javascript:;" onclick="return showPopup(' + residentURL + ');" >' + residentName[i] + '</a>'; I have integrated JQ Grid to display this link within the Name column. Despite no reported ...

javascripthtml

internet explorer 11 not properly aligning text to center

I've encountered an issue with center-aligning a canvas and overlapping image on different browsers. While Chrome and Firefox display it correctly, Internet Explorer does not cooperate. The canvas is not centered, but the image is. I've tried var ...

javascripthtmlcssinternet-explorer

Is it possible to program Zapier to automatically open a hyperlink that was included in an email?

Currently, I am utilizing Mailparser for extracting information from a booking email, and then leveraging Zapier to input this booking into our system. Within the email, there exists a link that needs to be accessed in order to confirm the booking. I am i ...

javascriptpythonzapier

Challenges with extracting and organizing dates using JavaScript regular expressions

My task involves organizing these text rows into specific groups based on certain criteria and names. Il Messaggero Roma 22 settembre 2023 Il Messaggero Roma 21 settembre 2023 Il Messaggero 22 settembre 2023 Il Messaggero 21 settembre 2023 Il Messaggero Ro ...

javascriptregex

BlueMist Failure Predicted After Following Error

Looking for insights on why NodeJS instances crash during a Next tick or Mongoose pre error. How can we improve application stability as we troubleshoot these errors? Will IBM be introducing more resilience measures? One idea could be to set up a Linux do ...

javascriptnode.jserror-handlingibm-cloud

getting rid of the angular hash symbol and prefix from the anchor tag

I am having difficulty creating a direct anchor link to a website. Whenever I attempt to link to the ID using: where #20841 is my anchor tag. Angular interferes with the URL and changes it to: This functions properly in Chrome and Firefox, but i ...

javascriptangularjs