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

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
How to add transparent text on top of an image using CSS?CSSHow to Create a Copy of a Table in SQL and MySQL?SQL/MySQLHow to add and remove list items using JavaScript?JavaScriptWordPress: How to add a Search Icon in Menus with toggle effect using jQuery?jQueryHow to add a Line Chart in Angular App?Angular4 advanced ways to search ColleagueColleague