How to scroll left-right with buttons with javascript smoothly?

Question

I use this code to scroll my div content with left and right buttons. This simple code is very useful I can use it anywhere. So I just need to know how to scroll when these buttons smoothly. By editing this piece of javascript code can I scroll smoothly when I click the buttons?

const buttonRight = document.getElementById('slideRight');
        const buttonLeft = document.getElementById('slideLeft');
    
        buttonRight.onclick = function () {
          document.getElementById('container').scrollLeft += 150;
        };
        buttonLeft.onclick = function () {
          document.getElementById('container').scrollLeft -= 150;
        };

#container {
      width: 145px;
      height: 100px;
      border: 1px solid #ccc;
      overflow-x: scroll;
    }

    #content {
      width: 250px;
      background-color: #ccc;
    }

<div id="container">
      <div id="content">Click the buttons to slide horizontally!</div>
    </div>
    <button id="slideLeft" type="button">Slide left</button>
    <button id="slideRight" type="button">Slide right</button>

ardean · Accepted Answer · 2020-06-11T10:48:45.227

1

You can use css scroll-behavior: smooth; on the container element:

const rightButtons = Array.from(document.getElementsByClassName('slideRight'));
const leftButtons = Array.from(document.getElementsByClassName('slideLeft'));
const containers = Array.from(document.getElementsByClassName('container'));

let index = 0;
for (const rightButton of rightButtons) {
    const container = containers[index];
    rightButton.addEventListener("click", function () {
        container.scrollLeft += 150;
    });
    index++;
}

index = 0;
for (const leftButton of leftButtons) {
    const container = containers[index];
    leftButton.addEventListener("click", function () {
        container.scrollLeft -= 150;
    });
    index++;
}

.container {
  width: 145px;
  height: 100px;
  border: 1px solid #ccc;
  overflow-x: scroll;
  scroll-behavior: smooth;
}

.content {
  width: 250px;
  background-color: #ccc;
}

<div class="container">
  <div class="content">Click the buttons to slide horizontally!</div>
</div>
<button class="slideLeft" type="button">Slide left</button>
<button class="slideRight" type="button">Slide right</button>

<div class="container">
  <div class="content">Click the buttons to slide horizontally!</div>
</div>
<button class="slideLeft" type="button">Slide left</button>
<button class="slideRight" type="button">Slide right</button>

edited Jun 11 '20 at 10:48

answered Jun 10 '20 at 19:02

ardean

152
7

This is a simple quick and efficient solution thank you. I want to ask something else please. When I want to make a 2 scrollable different divs and give the html elements same ID's with this piece of javascript code. Both divs are not responding to clicks. How can I use this code with 2 different divs in a same html page? – kkakaossski Jun 10 '20 at 19:09
you can use the `class` attribute instead of `id` – ardean Jun 10 '20 at 19:12
How should I edit the Javascript code to use with class? I know nothing about Javascript. Thank you already.. – kkakaossski Jun 10 '20 at 19:14
thank you, but I mean there will be 2 scrollable divs with 4 different buttons. 1 div has left and right buttons and another div with another left and right buttons. when I try to do this in the same html page both of them are stop working – kkakaossski Jun 10 '20 at 21:35
Hello again, this code works perfect. But there is a thing, in Iphones you cant scroll with your fingers. You must click the buttons and even if you click buttons it doesn't work smoothly. But in any other devices like samsung works scroll with finger and scrools smoothly with buttons. Iphones not working.. Is there a possibility to make this work on Iphones with this 2 functions? Thank you.. – kkakaossski Jun 12 '20 at 10:09
1

Hi, you can't fix it with css because the Safari Browser does not support this feature (as many other features) here is a stackoverflow question about this: https://stackoverflow.com/questions/56011205/is-there-a-safari-equivalent-for-scroll-behavior-smooth/56011281 the solution would be to control the scroll with JavaScript alone, which is a lot of effort and will have not the best performance. As many times Apple Safari stops or delays innovative projects... – ardean Jun 14 '20 at 09:42

How to scroll left-right with buttons with javascript smoothly?

1 Answers1