如何根据角度 2 中的按钮单击移动 div 滚动位置 [英] how to move div scroll position based on button click in angular 2

问题描述

在 app.component.html 文件中，我有一个带有水平滚动的 div 元素和两个按钮作为下一个和上一个.基于这些按钮点击我想移动滚动.

app.component.html

<div id="th-infinite-scroll-tracker" style="overflow-y:scroll; height: 200px;"scrollTracker (scroll)="onScroll($event)" (mouseup)="searchLog($event)"><div *ngFor="let log of arr; let i = index" innerHTML="{{log}}" [id]="i"></div>

<button (click)="onPreviousSearchPosition()" [disabled]="disablePreviousBtn">Previous</button><button (click)="onNextSearchPosition()" [disabled]="disableNextBtn">Next</button>

app.component.ts

@HostListener('scroll', ['$event'])onScroll(事件){this.scrollObject = 事件；}onPreviousSearchPosition(){this.disableNextBtn = false;this.scrollObject.target.scrollTop = 20 * --this.idCount;}onPreviousNextPosition(){this.disableNextBtn = false;this.scrollObject.target.scrollTop = 20 * ++this.idCount;}

使用上面的代码我们可以移动滚动，但我们需要滚动事件对象，它将在手动滚动后获得.请建议我，如何在组件类中创建滚动事件对象

解决方案

这是滚动 div 元素的方式 - https://plnkr.co/edit/2v0iVgkOZfISqlFAkrNX?p=preview

示例:

import { Component, ViewChild, ElementRef } from '@angular/core';@成分({选择器:'我的应用'，模板:`<div #panel style="overflow-y:scroll; height: 20px;"><div *ngFor="let log of arr; let i = index" innerHTML="{{log}}" [id]="i"></div>

<button (click)="onPreviousSearchPosition()">Previous</button><按钮(点击)="onNextSearchPosition()">下一步</button>`})导出类 AppComponent {public arr = ['foo', 'bar', 'baz'];@ViewChild('panel', { read: ElementRef }) 公共面板:ElementRef;公共 onPreviousSearchPosition(): 无效 {this.panel.nativeElement.scrollTop -= 20;}公共 onNextSearchPosition(): 无效 {this.panel.nativeElement.scrollTop += 20;}}

in app.component.html file i have one div element with horizontal scroll and two buttons as Next and Previous. based on these button click i want to move scroll.

app.component.html

<div id="th-infinite-scroll-tracker" style="overflow-y:scroll; height: 200px;" scrollTracker (scroll)="onScroll($event)" (mouseup)="searchLog($event)">
        <div *ngFor="let log of arr; let i = index" innerHTML="{{log}}" [id]="i"></div>
</div>
<button (click)="onPreviousSearchPosition()" [disabled]="disablePreviousBtn">Previous</button>
<button (click)="onNextSearchPosition()" [disabled]="disableNextBtn">Next</button>

app.component.ts

@HostListener('scroll', ['$event'])
onScroll(event){
    this.scrollObject = event;
}
onPreviousSearchPosition(){
    this.disableNextBtn = false;

    this.scrollObject.target.scrollTop = 20 * --this.idCount;
  }
onPreviousNextPosition(){
    this.disableNextBtn = false;

    this.scrollObject.target.scrollTop = 20 * ++this.idCount;
  }

using above code we can move the scroll but we need scroll event object which will get after scrolling manually. Please suggest me, how to create scroll event object in component class

解决方案

This is how you scroll the div element - https://plnkr.co/edit/2v0iVgkOZfISqlFAkrNX?p=preview

example:

import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <div #panel style="overflow-y:scroll; height: 20px;" >
      <div *ngFor="let log of arr; let i = index" innerHTML="{{log}}" [id]="i"></div>
    </div>
    <button (click)="onPreviousSearchPosition()">Previous</button>
    <button (click)="onNextSearchPosition()">Next</button>
  `
})
export class AppComponent { 
  public arr = ['foo', 'bar', 'baz'];
  @ViewChild('panel', { read: ElementRef }) public panel: ElementRef<any>;

  public onPreviousSearchPosition(): void {
    this.panel.nativeElement.scrollTop -= 20;
  }

  public onNextSearchPosition(): void {
    this.panel.nativeElement.scrollTop += 20;
  }
}

这篇关于如何根据角度 2 中的按钮单击移动 div 滚动位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！