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)?


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.


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.


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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
What is the difference between let and var in Swift?SwiftIs there a difference between SCSS and Sass?SCSSQuick Introduction to 11 Array Iteration Methods in JavaScriptJavaScriptINTERSECT and EXCEPT in PostgresPostgresHow to catch .keypress() on body using jQuery?jQueryWordPress: How to setup and get values from an ACF options page?WordPress