YogeshChauhan . com

How to scroll contents of HTML body horizontally and vertically using JavaScript?

in JavaScript on March 11, 2021

We just saw an example of scrolling the content of an element. We can apply the same technique here.

To scroll the HTML body content vertically we can use scrollTop DOM property. You can read more about it in this post.

To scroll the HTML body content vertically we can use scrollLeft DOM property. Let’s look at the details.

We can use the scrollLeft property to set the number of pixels on any element’s content and it should scroll horizontally by that many pixels.

We can also use it to get the number of pixels any element has moved down horizontally.

Simply set the property like this syntax


el.scrollLeft = number in pixels

Or get the property like this syntax


el.scrollLeft

Things to remember

  • Try not to set the number of pixels in negative. It doesn’t work like margin or padding. JavaScript will convert the negative number to a zero.
  • If you try to scroll any element that is not scrollable, then again JS will set the number to a zero.
  • If you set the scrolling number in pixel greater than the box itself, then it will be set to the maximum box width.

Example: scroll body contents using JavaScript

amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

JavaScript: Methods for HTML DOM classList PropertyJavaScriptForcing the domain to serve securely using HTTPSMiscWhat’s a Log File and What are Log File Monitors?MiscReverse a String in JavaScriptJavaScriptOverview of Drupal and how it worksDrupalHow to create a simple digital clock using JavaScript?JavaScriptHigher Order Functions in JavaScript with ExamplesJavaScriptCreate a responsive pricing table using simple HTML and CSSCSSSELF JOIN in PostgresPostgresWhat’s a repository on Github?MiscHow to create an empty array in Swift?SwiftThe difference between Class declarations and Class expressions in JavaScriptJavaScript