So I have this app in angular2 where I need to scroll a component horizontally but with buttons right and left. So I need a function for each button that scroll to right or left the content. I need something like this:
I tried using document.getElementById('myscrolldiv').animate({ scrollLeft: "-=" + 250 + "px"; }
but Angular does not recognize the animate
line.
So I am looking for a diferent way of scroll horizontally using buttons but NOT using jquery. Is there any way to do this in angular?
Here is my html
<div class="container">
<div class="side">
<mat-icon (click)="scrollLeft()">keyboard_arrow_left</mat-icon>
</div>
<div id="widgetsContent" class="middle">
<div class="scrolls">
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
</div>
</div>
<div class="side">
<mat-icon (click)="scrollRight()">keyboard_arrow_right</mat-icon>
</div>
</div>
And here is my css
.container {
display: flex;
height: 22.5vh !important;
}
.side {
width: 50px;
height: 22.5vh !important;
}
.middle {
flex-grow: 1;
height: 22.5vh !important;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
So, how do I scroll right and left pushing the buttons? please help.
To enable horizontal scrolling, we can use the CSS property overflow-x. If we assign the value scroll to the overflow-x property of the container element, the browser will hide horizontally overflowing content and make it accessible via horizontal scrolling.
((JavascriptExecutor) driver). executeScript("arguments[0]. scrollIntoView(true);", element); This works for vertical scrolling but not for horizontal.
Show scroll bars in Word and Excel for WindowsOn the Advanced tab, scroll to the Display section. Select Show horizontal scroll bar and Show vertical scroll bar, and then click OK.
{x}zl and {x}zh will scroll the screen right and left respectively. That's a lot to remember to see some more text.
Consider the following solution
In .html
<div #widgetsContent class="custom-slider-main">
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
</div>
In .scss
.custom-slider-main{
display: flex;
overflow: hidden;
scroll-behavior: smooth;
}
In .ts
@ViewChild('widgetsContent') widgetsContent: ElementRef;
And On click of left/right button use the following functions
scrollLeft(){
this.widgetsContent.nativeElement.scrollLeft -= 150;
}
scrollRight(){
this.widgetsContent.nativeElement.scrollLeft += 150;
}
Import ViewChild and ElementRef to get elemenet refrence.
use #localvariable as shown here, <div #widgetsContent class="middle">
get element in component, @ViewChild('widgetsContent', { read: ElementRef }) public widgetsContent: ElementRef<any>;
change scrollvalue, this.widgetsContent.nativeElement.scrollTo({ left: (this.widgetsContent.nativeElement.scrollLeft + 150), behavior: 'smooth' });
An example is shown below
import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
@Component({
selector: 'my-app',
template: `
<div class="container">
<div style="float: left">
<button (click)="scrollLeft()">left</button>
</div>
<div #widgetsContent class="middle">
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
<div class="info-widget">
WIDGET
</div>
</div>
<div style="float: right">
<button (click)="scrollRight()">right</button>
</div>
</div>
`,
styles: [`
.info-widget {
width: 31.75%;
border: 1px solid black;
display: inline-block;
}
.middle {
float: left;
width: 90%;
overflow: auto;
/*will change this to hidden later to deny scolling to user*/
white-space: nowrap;
}
`]
})
export class AppComponent {
@ViewChild('widgetsContent', { read: ElementRef }) public widgetsContent: ElementRef<any>;
public scrollRight(): void {
this.widgetsContent.nativeElement.scrollTo({ left: (this.widgetsContent.nativeElement.scrollLeft + 150), behavior: 'smooth' });
}
public scrollLeft(): void {
this.widgetsContent.nativeElement.scrollTo({ left: (this.widgetsContent.nativeElement.scrollLeft - 150), behavior: 'smooth' });
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With