我正在制作 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
两侧滚动..
如果没有内容可显示,如何停止滚动?
最佳答案
这很棘手,因为您要反向移动容器,所以您必须使用变量的负值。
我做了一个quick stackblitz显示(抱歉,我稍微更改了您的代码以简化它),告诉我它是否是您想要的:
<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>
关于javascript - 当没有内容以 Angular 6 显示时如何停止滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53831102/