當沒有內容顯示在角度6中時，如何停止滾動？

Question

我正在做角度6應用程序，我正在制作一個可滾動的div，

HTML：

<button class="lefty paddle" id="left-button"> PREVIOUS </button>
  <div class="container">
    <div class="inner" style="background:red"></div>
    <div class="inner" style="background:green"></div>
    <div class="inner" style="background:blue"></div>
    <div class="inner" style="background:yellow"></div>
    <div class="inner" style="background:orange"></div>
  </div>
<button class="righty paddle" id="right-button"> NEXT </button>

TS：

  ngOnInit() {
    const container = document.querySelector(".container");
const lefty = document.querySelector(".lefty");
let translate = 0;

lefty.addEventListener("click", function() {
    translate += 200;
    container.style.transform = "translateX(" + translate + "px" + ")";
});

const righty = document.querySelector(".righty");
righty.addEventListener("click", function() {
    translate -= 200;
    container.style.transform = "translateX(" + translate + "px" + ")";
});
  }

工作Stckblitz： https ://stackblitz.com/edit/angular-mncf26

在此工作演示中，您可以看到有一個下一個和上一個按鈕，該按鈕將使每次單擊向右或向左轉換200px 。

在這里，即使沒有內容，單擊還是在左側還是在右側，都在向左滾動200px 。

如果沒有內容可顯示，如何停止滾動？

Answer 1

這很棘手，因為您正在反向移動容器，因此必須使用變量的負值。

我進行了快速的堆棧閃電展示（很抱歉，我對您的代碼做了一些更改，以簡化它，對不起），請告訴我這是否是您想要的：

<button class="lefty paddle" 
  (click)="translateValue = translateValue + 200" 
  [disabled]="-translateValue <= 0"> PREVIOUS </button>

  <div class="container" #container [ngStyle]="getStyle">
    <div class="inner" *ngFor="let item of elements" [style.background]="item" #items></div>
  </div>

<button class="righty paddle" 
  (click)="translateValue = translateValue - 200"
  [disabled]="-translateValue >= container.offsetWidth"> NEXT </button>