I am developing an angular 6 application where I have scrollable divs containing:
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" + ")";
});
}
Live Demo: https://stackblitz.com/edit/angular-mncf26
In this live demo, there are buttons for next and previous that shift the content by 200px in the respective directions. However, even if there is no content, the scrolling still occurs in both directions. The challenge now is to prevent the scroll when there is no more content to display.