Yogesh Chauhan's Blog

How to create a Horizontal Scroll on button click using JavaScript?

in JavaScript on April 16, 2021

If you’re just looking for a CSS based solution without clicks, I’ve got you covered in this post:

How to create a horizontal scrolling menu with and without flex using CSS (or SCSS)?

HTML

Let’s add the simple HTML container and contents inside. I have tried to include links since mostly we need this kind of scrolling with a bunch of links. Also, add the buttons to indicate the scrolling direction.

CSS

Currently the width is 100% so no need to scroll. Let’s make it a smaller window where the content is required to scroll. Also, let’s make a bit nice looking with minimal style changes.

As you must have noticed, the scrolling is already working when try to slide left or right using mouse pad.


JavaScript

Let’s create the JavaScript function and add onclick attribute for the buttons in HTML.

Here’s the function and working demo:

Let’s understand line by line.

Using HTML onclick attribute, I am calling a function slide with a value since the JavaScript function requires a direction parameter.

In the function itself, we are getting the main container using getElementById. I have set the variable scrollCompleted to 0 since initially there won’t be any distance covered.

After that I am using setInterval method to create the sliding effect in timely manner. You can change the speed of the scroll by changing the setInterval function time.


Inside the setInterval function, I am just checking if the variable passed on the click was left or right and according to that value I am adding to subtracting a specific value — which you can change as per your requirements. I am using scrollLeft to do so.

Also, everytime we add or subtract a value, we need to increment the value of scrollCompleted variable since that will keep an eye on distance covered (scroll completed).

Finally, we need to stop scrolling at a certain point which in this case I am stopping the scroll when it covers 100px. Keep in mind that I am talking about a stopping on a single click that means on a single click I am making the content shift 100px left or right based on the click.

That’s it. After each click it will cover 100px and it’ll stop at the end when there is no more distance to cover.

There are few ways to do the same horizontal scrolling. This is just one way to do it.


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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
The SELECT DISTINCT Statement in SQLSQL/MySQLFile System Integrity: How to Keep an Eye on Your Files and Folder Change?MiscellaneousHow does Binding work in JavaScript?JavaScriptHow to create a dynamic countdown using HTML and JavaScript?HTMLHow to create bouncing balls using HTML canvas and JavaScript?HTMLIN Operator in PostgreSQLPostgres