使用angular2上的按钮进行水平滚动 [英] Horizontal Scroll using buttons on angular2
问题描述
所以我在angular2中有这个应用程序,在这里我需要水平滚动组件,但要使用左右按钮.因此,我需要为每个按钮左右滚动内容提供一个功能.我需要这样的东西:
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:
我尝试使用document.getElementById('myscrolldiv').animate({ scrollLeft: "-=" + 250 + "px"; }
,但是Angular无法识别animate
行.
I tried using document.getElementById('myscrolldiv').animate({ scrollLeft: "-=" + 250 + "px"; }
but Angular does not recognize the animate
line.
因此,我正在寻找使用按钮而不是使用jquery进行水平滚动的另一种方式.有什么办法可以做到这一点吗?
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?
这是我的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>
这是我的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.
推荐答案
导入ViewChild和ElementRef以获取elemenet信息.
Import ViewChild and ElementRef to get elemenet refrence.
使用#localvariable,如下所示,<div #widgetsContent class="middle">
use #localvariable as shown here, <div #widgetsContent class="middle">
获取组件@ViewChild('widgetsContent', { read: ElementRef }) public widgetsContent: ElementRef<any>;
更改滚动值,this.widgetsContent.nativeElement.scrollTo({ left: (this.widgetsContent.nativeElement.scrollLeft + 150), behavior: 'smooth' });
示例如下所示
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' });
}
}
这篇关于使用angular2上的按钮进行水平滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!