翻译是实现水平滚动的好主意吗？

Question

我必须在我的 angular 2 应用程序中实现水平滚动，我必须按固定数量的像素滚动。滚动条不应该可见，用户将使用左右按钮进行滚动。

我想知道，使用变换属性来实现滚动是个好主意吗？特别是如果我必须让它在所有浏览器上工作。

我将不得不查询 window.getComputedStyle() 以获取当前转换值，然后应用转换。

Answer 1

尝试使用正常滚动而不是变换。您仍然可以隐藏滚动条并启用滚动按钮。只需使用 ViewChild 获取可滚动容器并访问 nativeElements 滚动属性。

yourFile.ts

@ViewChild('scrollElement') scrollableContainer: ElementRef;

onScroll(value){
   this.scrollableContainer.nativeElement.scrollLeft =
              this.scrollableContainer.nativeElement.scrollLeft + value;
}

yourFile.html

<div class="outerContainer">
  <div #scrollElement class="scrollableContainer">
   <!-- yourScrollableContent -->
  </div>
</div>
<button (click)="onScroll(-10)" label="left"></button>
<button (click)="onScroll(+10)" label="right"></button>

yourFile.css

.outerContainer{
 position: relative;
 display: flex;
}
.scrollableContainer{
 overflow: hidden;
}

翻译是实现水平滚动的好主意吗？

Is translation a good idea to implement horizontal scrolling?

translation

transformation

horizontal-scrolling

angular