How to scroll Right on a button click.?

Question

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

@PraveenKumarPurushothaman this is a totally different question... OP is asking about `scrollLeft`, you pointed to a question about mouse right-click. — GrafiCode, Jul 08 '19 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, Jul 08 '19 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, Jul 08 '19 at 10:32
@PraveenKumarPurushothaman was a genuine mistake. edited it. — Abhilash, Jul 08 '19 at 10:58

score 5 · Accepted Answer · answered Jul 08 '19 at 11:06

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>

Thanks a lot man! I understand this now. Perfectly implemented it. — Abhilash, Jul 08 '19 at 19:28

score 3 · Answer 2 · answered Jun 02 '20 at 12:15

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
}

score 0 · Answer 3 · answered Feb 22 '20 at 16:38

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

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>

Then I set new scroll with a function:

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

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
  }

How to scroll Right on a button click.?

3 Answers3