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

Javascript 在angular 6中没有显示内容时,如何停止滚动?,javascript,html,css,angular,typescript,Javascript,Html,Css,Angular,Typescript,我正在制作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="

我正在制作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" + ")";
});
  }
工作模式闪电战:

在这个工作演示中,您可以看到“下一步”和“上一步”按钮,该按钮将根据单击向左或向右翻译
200px

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


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

这很棘手,因为您正在反向移动容器,因此必须使用变量的负值

我做了一个演示(我对您的代码做了一些修改以简化它,对不起),告诉我这是否是您想要的:

上一个
下一个

转换之前,请检查新的转换值。如果它低于零。返回零。如果大于container.offsetWidth,则返回container.offsetWidth。使用变量跟踪位移,demo@ABOS,
Yikes!找不到您请求的页面。
。不知道downvoter的情况。。即使我的代码被编辑了,它也暂时解决了我的问题。。谢谢你的时间和帮助。。为你投票。。