So I made a horizontal slider of some cards and i am able to make them scroll left on click of a button but how do I get a button, which on clicked scrolls right?

<div id="recCard-slider">
    <p><i class="fas fa-chevron-left" id="scrollRight"></i> <i class="fas fa-chevron-right" id="scrollLeft" ></i></p>
    <div id="content">    
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
    </div>
</div>

const buttonleft = document.getElementById('scrollLeft');

buttonleft.onclick = function(){
       document.getElementById('content').scrollLeft +=100;
}

I have #content with overflow-x: scroll and white-space: nowrap;

I want the Icon "chevron-left" for scrolling back (right).

So I made a horizontal slider of some cards and i am able to make them scroll left on click of a button but how do I get a button, which on clicked scrolls right?

<div id="recCard-slider">
    <p><i class="fas fa-chevron-left" id="scrollRight"></i> <i class="fas fa-chevron-right" id="scrollLeft" ></i></p>
    <div id="content">    
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
    </div>
</div>

const buttonleft = document.getElementById('scrollLeft');

buttonleft.onclick = function(){
       document.getElementById('content').scrollLeft +=100;
}

I have #content with overflow-x: scroll and white-space: nowrap;

I want the Icon "chevron-left" for scrolling back (right).

• javascript
• html

• It's white-space not white-spaces. – Praveen Kumar Purushothaman Commented Jul 8, 2019 at 10:21
• 1 @PraveenKumarPurushothaman this is a totally different question... OP is asking about scrollLeft, you pointed to a question about mouse right-click. – GrafiCode Commented Jul 8, 2019 at 10:23
• @GrafiCode The OP is trying to get the right click functionality working. Isn't it not? If not, I'll reopen, thanks. – Praveen Kumar Purushothaman Commented Jul 8, 2019 at 10:26
• @PraveenKumarPurushothaman OP is developing a slider, using javascript function Element.scrollLeft, and he asked how to make it work scrolling to the right – GrafiCode Commented Jul 8, 2019 at 10:32
• @PraveenKumarPurushothaman was a genuine mistake. edited it. – Abhilash Commented Jul 8, 2019 at 10:58

3 Answers 3

Please use following code and then try to understand the logic.

<style>
.child {
  width: 100px;
  white-space: nowrap;
  overflow-x: scroll;
}
</style>

<script>
(function(w){
    w.addEventListener('load', function(){
        const   btn_left = document.getElementById('btn-left'),
                btn_right = document.getElementById('btn-right'),
                content = document.getElementById('con');
        const content_scroll_width = content.scrollWidth;
        let content_scoll_left = content.scrollLeft;
        btn_right.addEventListener('click', () => {
            content_scoll_left += 100;
            if (content_scoll_left >= content_scroll_width) { content_scoll_left = content_scroll_width; }
            content.scrollLeft = content_scoll_left;
        });
        btn_left.addEventListener('click', () => {
            content_scoll_left -= 100;
            if (content_scoll_left <= 0) {
                content_scoll_left = 0;
            }
            content.scrollLeft = content_scoll_left;
        });
    });
})(window);
</script>

<div class="parent">
     <div class="child" id="con">
                Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
                Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
                Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
                Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
                Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
                Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
                Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
                Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
                Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
    </div>
</div>
<button id="btn-left">Left scroll</button>
<button id="btn-right">Right scroll</button>

You should always use the id of the div element which element you want to scroll either in left or right on a button click.

HTML veiw

<span  (click)="clicked()">scroll horizontal</span>
<ul type="none"id="content" >

ts code

clicked() {
document.getElementById('content').scrollBy(30, 0); // for right scroll
document.getElementById('content').scrollBy(-30, 0); // for left scroll
}

I found another way optimized to validate the way to disabled the right scroll. I use Angular and typescript, but as @Niladri says: that what metters is understand the logic

1. My HTML structure have a div index as parent, and a div miniaturas as child:

<div id="index">

   <button class="leftScroll-btn slider-scroll-bar" (click)="scrollMinLeft()" 
   [disabled]="!checkScrollLeft()">
       <i class="fas fa-chevron-circle-left"></i>
   </button>

   <div id="miniaturas" class="center">
       <div [ngClass]="{'selected': i == motoIndex}" class="miniatura 
       imgContainer" *ngFor="let moto of motos; let i = index" 
       (click)="jumpTo(i)">
           <img [src]="moto.imagenUrl" alt="">
       </div>
    </div>

    <button class="rightScroll-btn slider-scroll-bar" (click)="scrollMinRight()" 
    [disabled]="!checkScrollRight()">
        <i class="fas fa-chevron-circle-right"></i>
     </button>

</div>

2. Then I set new scroll with a function:

scrollMinRight() {
    var minis = document.getElementById('thumbnails')
    var scrollLeft = minis.scrollLeft
    scrollLeft += 100
    minis.scrollLeft = scrollLeft
  }

3. Then I check the parent and the child diference scrollWidths and I validate:

checkScrollRight() {
    var minis = document.getElementById('miniaturas')
    var index = document.getElementById('index')
    var scrollMinis = minis.scrollWidth
    var scrollIndex = index.scrollWidth
    var diff = scrollMinis - scrollIndex
    var scrollLeft = minis.scrollLeft
    var valid = scrollLeft >= diff ? false : true
    return valid
  }