在angular 6中没有显示内容时,如何停止滚动?

我正在制作angular 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>

  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" + ")";
});
  }

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

在这个工作演示中,你可以看到有下一个和上一个按钮,这将使翻译 200px 按单击键向右或向左。。

这里,如果单击是在左侧或右侧进行的,即使没有内容,也会滚动 200px 两边。。

如果没有要显示的内容,如何停止滚动??