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和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和Typescript，但正如@Niladri所说：计量表理解逻辑

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

然后，我使用函数设置新的滚动条：

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

然后我检查父母和孩子的区别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 veiw

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

ts代码

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

如何在按钮单击上向右滚动？

3 个答案: