したがって、コンポーネントを水平方向にスクロールする必要がありますが、ボタンを左右に動かす必要があるangular2にこのアプリがあります。そのため、コンテンツを右または左にスクロールするボタンごとに関数が必要です。次のようなものが必要です:
document.getElementById('myscrolldiv').animate({ scrollLeft: "-=" + 250 + "px"; }
を使用してみましたが、Angularはanimate
行を認識しません。
そこで、jqueryを使用せずに、ボタンを使用して水平にスクロールするさまざまな方法を探しています。これを角度で行う方法はありますか?
これが私の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;
}
では、ボタンを押しながら左右にスクロールするにはどうすればよいですか?助けてください。
ViewChildとElementRefをインポートして、elemenet refrenceを取得します。
ここに示すように#localvariableを使用します、_<div #widgetsContent class="middle">
_
コンポーネントの要素を取得、@ViewChild('widgetsContent', { read: ElementRef }) public widgetsContent: ElementRef<any>;
scrollvalueの変更、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' });
}
}
_