The event.pageY position consistently reflects the laptop screen size rather than the exact position where the click occurred

My webpage is scrollable, but the event.pageY position always corresponds to my screen size. Even when scrolling down and clicking near the top of the screen, it registers as 50px.

I am currently utilizing

event.pageY 

While this functions correctly on a regular HTML page, it behaves strangely in my Angular page where data loads dynamically. It seems to be referencing the laptop screen position rather than the actual page scroll position.

Answer №1

Looking at the code, you can observe that event.pageY gives the Y axis value in relation to the screen. To get the total scrolled amount added to it, use the following formula:

event.pageY + document.documentElement.scrollTop

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

Secure communication and client-server API key protection

Looking for advice on building a JS app that communicates with my server using ajax. I need to give the client an api-key for authorization, but sending it through ajax poses security risks as it can easily be replicated by anyone. I don't want to req ...

Is it possible for an Android webview to access the device's geo location?

For the application I'm working on, it's necessary to access the user's geo location. We've created a HTML 5 based website and are using a webview to develop our mobile application by calling the website URL. With the latest geo tags av ...

The proper method for incorporating a hover effect using CSS

Currently, I am facing an issue with integrating a hover effect to an image using CSS. The problem arises when the hover area is not aligned properly and the effect triggers even when the mouse is not directly over the image. <body> <div id=&apos ...

arrangeable database table

I have created a large PHP generated table from a database and now the customer is requesting for it to be sortable. Below is a sample of the table's contents: ID BRAND KIND DESCRIPTION PRICE The customer wants to sort by price, and also have the a ...

The directive code takes precedence over the controller code and is executed first

A custom directive has been implemented and is utilized as shown below: <div car-form car="car" on-submit="createCar(car)"></div> This directive is used on both the new and edit pages, each with its own controller. The EditCarController retri ...

Kartik's gridview in yii2 has a unique feature where the floating header in the thead and tbody are

I'm looking to create a table gridview with a floating header, where the tbody and thead are not the same. The image appears after refreshing the page, before the modal is refreshed. After refreshing the modal, this modal is inside pjax and it sets t ...

Watching a live video stream in real-time using WebRTC with React

Here is the HTML code <video ref={videos} autoPlay ></video> <Button onClick={() => navigator.mediaDevices.getUserMedia({audio: true, video: true}).then((mediaStream) => { videos.srcObject = mediaStream; videos.onloadedmetad ...

press a cURL PHP ajax button to trigger an action

Hello everyone, I could really use some help here. I've been looking at similar questions but none of the answers seem to apply to my situation. I extracted a page using curl, however, there's a button on that page that I am unable to interact w ...

javascript utilize jquery to advance saved event

When it comes to hyperlinks, I am pausing some of my native click events to verify if the resulting page contains the desired content. After storing the jquery event object and performing some validations, my goal is to allow the event to continue as usua ...

Load different select options using jQuery when the selection is changed

Below the select box with the id "course_name" and a div with an id of "dates", you will find my Javascript code. <script> $('#course_name').change(function() { url = "date_range.php?courseID=".$('#course_name').val(); $("# ...

Is it possible to transfer a variable from my javascript code to a jsp file?

Within a HTML file, I have created a variable in JavaScript consisting of an array with two entries - a latitude and a longitude. I am looking to use AJAX to send this variable and then utilize it in my JSP file to populate a form. Does anyone have any su ...

Uncover a section of text from HTML using the Beautiful Soup module

I have an HTML snippet like this: <span id="lbldiv" class="lbl" style="color:Blue;"> Division : First; Grand Total: 3861; Grand Max Total: 4600 </span> By using the get_text method on the span element, I can extract the text: Division : ...

Tips for maintaining consistent content length of nested divs as one div's content grows

I am looking for a solution to ensure that when the map is running on my MUI card, some cards with more text content will increase in length while maintaining equal text alignment. I have attached a screenshot of my actual app and a CodeSandbox example for ...

ReactJS encountered an error: _this3.onDismissID is not defined as a function

My goal is to retrieve the latest news related to a specific search term from a website, showcase them, and provide a dismiss button next to each news item for users to easily remove them if desired. Here's a snippet of the code I'm using: import ...

Change the current tab's destination to a different URL

During the development of a simple extension, I encountered an issue with relocating my current tab to a new location. The code snippet I tried using didn't yield the desired results: function redirect() { console.log("HELLO"); chrome.tabs.g ...

The datepicker feature has been programmed to only allow past or present dates

I've integrated a date picker on a website like so: <input type="text" id="popupDatepicker" placeholder="Select Date" name="from_date" class="input" size="50" /> Here's the script being used: $(function() { $('#popupDatepicker&apos ...

Creating a Custom Class for a Custom Button in TinyMCE 4 Using addButton()

Is there a way to add a custom class to a custom button using the addButton() function in TinyMCE? Here is an example: editor.addButton('keywords', { text: 'Insert Keywords', class: 'MyCoolBtn', ...

We are experiencing difficulties rendering flash messages in Expressjs with Handlebars(hbs) and express-messages using flash-connect

I'm working on an express app and I want to display flash messages when a user signs up using a form. The technologies I am utilizing include Node.js, Express.js, Handlebars(hbs), connect-flash, and express-messages. To make finding errors easier, I ...

How to continuously animate images in HTML using Bootstrap

I want to showcase 7-8 client images in a continuous loop using a <marquee> tag. The issue is that there is a gap between the last and first images. Here is the HTML code I have: <marquee> <ul> <li><a href="#&q ...

issue with selecting tabs in jquery

I need help with a problem that is connected to my previous article on CSS, button selection, and HTML tags. You can find the article here. I am not very proficient in JavaScript, so I would appreciate any insights or guidance on how to tackle this issue. ...