Angular 5 - 使用按钮进行水平滚动

Question

我已经在角度应用程序中实现了卡片的水平滚动。滚动工作正常。但是，我想通过单击“向左”和“向右”按钮为用户提供向左或向右滚动的功能。每个按钮应该只滚动它自己的msgCardDeck。

这是我在StackBlitz上的代码：

https://stackblitz.com/edit/angular-atnq4z

这是我的打字稿，使其滚动，但它不起作用。如果有办法做到这一点，我将不胜感激。

// Scroll Left if there is anything to scroll
  scrollLeft() {
    document.querySelector('div.msgCard').scrollLeft -= 500;
  }

// Scroll Right if there is any area to scroll

  scrollRight() {
    document.querySelector('div.msgCard').scrollLeft += 500;
  }

Answer 1

试试这个解决方案

将事件对象作为参数传递给函数。

// necessary changes for ts.
 scrollLeft(e) {
    let wrapper = e.srcElement.closest('.msgCardScrollWrapper');
    wrapper.querySelector('.msgCardDeck').scrollLeft -= 500;
 }

 scrollRight(e) {
    let wrapper = e.srcElement.closest('.msgCardScrollWrapper');
    wrapper.querySelector('.msgCardDeck').scrollLeft += 500;
 }
 // necessary changes for html.
 <div class="msgCardNavRightButton" (click) = "scrollRight($event)">
    <button class="btn btn-primary">Right</button>
  </div>

 <div class="msgCardNavLeftButton" (click) = "scrollLeft($event)">
    <button class="btn btn-primary">Left</button>
 </div>

Answer 2

Hardik的答案的以下增强对我有用：

// necessary changes for ts.
     scrollLeft(e) {
        // find parent element; which has scrollable div.
        let wrapper = e.srcElement.closest('.msgCardScrollWrapper');
        let totalWidth = wrapper.querySelector('.msgCardDeck').clientWidth;
        // apply value to scrollable div.
        wrapper.querySelector('.msgCardDeck').scrollLeft -= totalWidth/2;
     }

     scrollRight(e) {
        let wrapper = e.srcElement.closest('.msgCardScrollWrapper');
        // find parent element; which has scrollable div.
        let totalWidth = wrapper.querySelector('.msgCardDeck').clientWidth;
        // apply value to scrollable div.
        wrapper.querySelector('.msgCardDeck').scrollLeft += totalWidth/2;
     }

     // necessary changes for html.
     <div class="msgCardNavRightButton" (click)="scrollRight($event)">
        <button class="btn btn-primary">Right</button>
      </div>

     <div class="msgCardNavLeftButton" (click)="scrollLeft($event)">
        <button class="btn btn-primary">Left</button>
     </div>