How to Obtain the Scroll Offsets in JavaScript

Whenever you pull up a webpage on the Internet, you see two things: your browser window and the webpage document you pulled up. Often the document is larger than the the window, which is why you see scrollbars either at the bottom or the right of your browser window. To obtain the scroll offset that occurs because of this phenomenon, you must build a function that pulls the offsets from the document and then returns them to your page's body, after which you can output them to the screen.

Instructions

1. Create a function between your document's "head" tags:

   function obtain_scroll_offsets()
   {
   }

2. Assign the offset values to two variables by using the "pageXOffset" and "pageYOffset" properties of the "self" method:

   var x_offset = self.pageXOffset;
   var y_offset = self.pageYOffset;

   Please these between the function's brackets {}.

3. Pass the offset values back to the HTML portion of your code using the "return" function:

   return [x_offset, y_offset];

   Place this after the variable declarations.

4. Create a JavaScript module in your HTML by submitting the following code between the page's "body" tags:

   <script type="text/javascript">

   </script>

5. Call the function and assign the values to a variable array:

   var offsets = obtain_scroll_offsets();

   Place this between the "script" tags.

6. Print the scroll offsets using the "document.write" method:

   document.write(offsets[0]);
   document.write(offsets[1]);

   Please these after the variable declaration.

References

• W3Schools: Window pageXOffset and pageYOffset Properties