如何在單擊按鈕時向右滾動。？

Question

所以我制作了一些卡片的水平滑塊，我可以讓它們在點擊按鈕時向左滾動，但我如何獲得一個按鈕，點擊后向右滾動？

<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;
}

我有#content with overflow-x: scroll和white-space: nowrap;

我想要圖標"chevron-left"用於向后滾動（右）。

Answer 1

請使用以下代碼，然后嘗試理解其中的邏輯。

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

Answer 2

我找到了另一種優化的方法來驗證禁用右滾動的方法。 我使用 Angular 和打字稿，但正如@Niladri 所說：衡量的是理解邏輯

1. 我的 HTML 結構有一個 div 索引作為父級，一個 div miniaturas 作為子級：

<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. 然后我用一個函數設置新的滾動：

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

3. 然后我檢查父級和子級差異 scrollWidths 並驗證：

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
  }

Answer 3

您應該始終使用要在單擊按鈕時向左或向右滾動的 div 元素的 id。

HTML視圖

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

代碼

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