Horizontal Scroll using buttons on angular2

Question

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

Answer 1

Import ViewChild and ElementRef to get elemenet refrence.

use #localvariable as shown here,

get element in component, @ViewChild('widgetsContent', { read: ElementRef }) public widgetsContent: ElementRef;

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: `
                

                

                    left
                

                

                    

                    WIDGET
                    
                    

                    WIDGET
                    
                    

                    WIDGET
                    
                    

                    WIDGET
                    
                    

                    WIDGET
                    
                    

                    WIDGET
                    
                

                

                    right
                
                
            `,
    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;

  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' });
  }
}

0 讨论(0)

查看其它2个回答

发布评论:

提交评论

---

•  加载中...