时间戳

首页 > 解决方案 > 根据手机屏幕大小处理网站滚动偏移

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

问题描述

如果可以向左滚动，我需要使这个 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() 方法”返回不同的值，我该如何处理任何屏幕尺寸。

标签： javascripthtmlangulartypescript

解决方案

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

解决方案

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

应用组件.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;
}

推荐阅读