JAVASCRIPT - HOW TO Get Center X/Y of Screen/Viewport - Javascript Source Code

JAVASCRIPT - HOW TO Get the EXACT Center X and Center Y Position of Where the Website Visitor is on the Web Page or Document Which is the Center of Their Web Browser or Viewport

To get the dead center x and y position of the viewers screen in Javascript we need to know ...

• The width of the visitors web browser. We take this number and divide in half to get the center x of the users viewport.
• The height of the viewers web browser or viewport divided in half plus the Y position of the top of their screen.

This gives us the exact center X and the exact center Y of the part of the web page the visitor is at right now.

The function to get the center X and center Y of the visitors current place on the web page is return from a function as an array.

function funcArrCenterXY(){ let viewportHalfWidth = (window.innerWidth * .5); let viewportHalfHeight = (window.innerHeight * .5); let centerX = (viewportHalfWidth + window.pageXOffset); let centerY = (viewportHalfHeight + window.pageYOffset); return [viewportHalfWidth, viewportHalfHeight, centerX, centerY]; }

Use window.onscroll Function to Update Center Screen X/Y

If you want the exact center X and center Y to update as the visitor navigates around the webpage, call the Javascript window.onscroll function.

window.onscroll= function(){ let arrXY = funcArrCenterXY(); // arrXY[0] half the width of the visitors web browser // arrXY[1] half the height of the visitors web browser // arrXY[2] is the exact center X (left/right) of the visitors browser window // arrXY[3] is the exact center Y (top/bottom) of the visitors browser window }

Feel free to right click this page and view the source code. This function to find the exact center X and center Y of the website visitors browser viewport is what is keep the red + in the exact center of the screen.