Как остановить прокрутку, когда нет контента для отображения в 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>

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 в любую сторону ..

Как остановить прокрутку, если нет содержимого для отображения?