根据手机屏幕大小处理网站滚动偏移

Question

如果可以向左滚动，我需要让这个 div 可见，

<div class="fade-left" [class.visible]="showFadeLeft()"></div>

 public showFadeLeft() {
    return this.boxToolbarElement.nativeElement.scrollWidth - 
           Math.abs(this.boxToolbarElement.nativeElement.scrollLeft) !== 
           this.boxToolbarElement.nativeElement.clientWidth;
   }

this.boxToolbarElement 是溢出内容的容器。

问题是当我在移动设备中打开网站时，总是显示“淡入淡出”的 div，因为显示尺寸（屏幕缩放）使“showFadeLeft() 方法”返回不同的值，我该如何处理任何屏幕尺寸。

Answer 1

注意：永远不要在 HTML 中使用 FUNCTION。它可能会导致一些副作用，并会降低您的应用程序性能。

解决方案

<div class="fade-left" [class.visible]="isVisible"></div>

App.component.ts

isVisible = false;                  // initial value can be false or tru; 

ngAfterViewInit(){                  // This life cycle hook will make sure that nativeElement is available for further operation.

   this.showFadeLeft();

}


private showFadeLeft() {           // Added private keyword

    this.isVisible = this.boxToolbarElement.nativeElement.scrollWidth - 
           Math.abs(this.boxToolbarElement.nativeElement.scrollLeft) !== 
           this.boxToolbarElement.nativeElement.clientWidth;
}