使用 angular2 上的按钮进行水平滚动答案

【问题标题】：Horizontal Scroll using buttons on angular2使用 angular2 上的按钮进行水平滚动
【发布时间】：2018-08-03 22:29:52
【问题描述】：

所以我在 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;
}

那么，如何按按钮左右滚动？请帮忙。

【问题讨论】：

你的JS代码在哪里？
我在角组件中使用打字稿。函数 scrollLeft() 和 scrollRight() 现在是空的，但我需要一个不使用 JQuery 的滚动函数
您写道：“我尝试使用document.getElementById('myscrolldiv')”。但是我在您的 HTML 代码中没有看到任何带有 id="myscrolldiv" 的元素。你真的了解自己在做什么吗？

标签： html css angular typescript

【解决方案1】：

导入 ViewChild 和 ElementRef 以获取元素引用。

使用#localvariable，如下所示，<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' });
  }
}

【讨论】：

public widgetsContent: ElementRef - 这在 Angular 5 中不起作用。错误：类型 ElementRef 不是通用的。当我用谷歌搜索错误时，人们指向升级材料版本，但我们的项目中根本没有使用材料。
谢谢，这对我有用，但我想根据屏幕宽度显示滚动。 "scrolling.this.widgetsContent.nativeElement.scrollLeft + 150" 不想硬核这 150
@Hari9513 您可以动态获取滚动宽度。 scrollLeft() { this.widgetsContent.nativeElement.scrollLeft -= this.widgetsContent.nativeElement.scrollWidth; } scrollRight() { this.widgetsContent.nativeElement.scrollLeft += this.widgetsContent.nativeElement.scrollWidth; }

【解决方案2】：

考虑以下解决方案

在.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>

在 .scss 中

.custom-slider-main{
    display: flex;
    overflow: hidden;    
    scroll-behavior: smooth;
}

在 .ts 中

@ViewChild('widgetsContent') widgetsContent: ElementRef;

点击左/右按钮使用以下功能

scrollLeft(){
    this.widgetsContent.nativeElement.scrollLeft -= 150;
  }

  scrollRight(){
    this.widgetsContent.nativeElement.scrollLeft += 150;
  }

【讨论】：