Is there a way to make the contents of a div scroll to the left when one button is clicked and to the right when another button is clicked?
I've tried using ScrollLeft, but it doesn't seem to be working...
Here's the HTML code:
<button id="Left" (click)="leftScroll()">Left</button>
<div id="myDiagramDiv1" style=" overflow: hidden; overflow-y: hidden;"></div>
<button id="right" (click)="rightScroll()">Right</button>
And here's the relevant TypeScript code:
export class ComponentViewPage implements OnInit {
leftScroll() {
event.preventDefault();
$('#myDiagramDiv1').animate({
scrollLeft: "+=200px"
}, "slow");
}
rightScroll() {
event.preventDefault();
$('#myDiagramDiv1').animate({
scrollLeft: "-=200px"
}, "slow");
}
}