时间戳

首页 > 解决方案 > 打字稿滚动位置

javascript - 打字稿滚动位置

问题描述

在我的角度 UI 代码中，我有一个组件类，它调用如下

app.component.html

//...
<div class="banner">
    <p-dialog [(visible)]="displayCOI" styleClass="coiDialog" [contentStyle]="{'overflow-y': 'hidden'}" [modal]="true" [style]="{width: '75vw'}" [baseZIndex]="10000" [showHeader]="false"
        [draggable]="false" [resizable]="false">  
        <coi (notify)="onCoIAccept($event)"></coi>
    </p-dialog>
</div>

...///

coi.component.html 如下所示

<div>
<div class="row" style="padding: 10px 0px">
    <div class="col-sm-4">
    <p align="center"><b>Instructions</b></p>                        
    <br>...//
    </div>
    <div #scrollDiv id="scrollDiv" class="col-sm-6" style="height:350px; overflow-y: scroll;" (scroll)="onScroll($event)">
    <p-table #dt [columns]="cols" [scrollable]="true" [value]="usersLi" [(selection)]="selectedUsersLi"  dataKey="id">
    //....
    ..///
    </p-table>
    </div>
    <div class="col-sm-2">
    <div align="center">
        <button pButton type="button" label="Accept" [disabled]="disableAccept" (click)="close()" class="ui-button-rounded"></button>&nbsp;
        </a>
    </div>
</dv>
</div>

coi.component.ts 代码如下：

export class coiComponent  {
  @ViewChild("scrollDiv") scrollDiv: ElementRef;
  disableAccept: boolean = false;
  
  ngOnInit():void { 
    this.keys = Object.keys(this.propertyObj); 
    this._utilService.convertKeysToHeader(this.keys,this.cols);
    this.disableAccept = true;    
    this.loadRecords();
  }
  
  
  onScroll(event: any) { 
    // visible height + pixel scrolled >= total height 
    if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight) {
        this.disableAccept = false;
        console.log("End");
    }
  }
  
   ngOnChanges(changes: SimpleChanges){
    console.log("ngOnChanges" , changes);
    for ( const propName in changes){
        let change = changes[propName];
        if ( propName == 'coi'){
            // console.log('CHANGED...DO HERE');
            console.log(this.scrollDiv.nativeElement.offsetHeight);
            console.log(this.scrollDiv.nativeElement.scrollHeight); 
        }
    
    }
    
    }
}

如您所见，模态被分为 3 个 DIV。1. instrucations, 2: table, 3. Accept button 模态本身具有固定的高度和隐藏的滚动。带有表格的 div 具有固定的高度和溢出滚动，并且可以完美运行。现在该表可以包含 30-50 条记录，因此启用了垂直滚动。我希望仅当用户滚动表格并查看所有记录时才启用第三个 div 上的接受按钮。所以function (scroll)="onScroll($event)"只有当滚动完全滚动并且它工作完美时才启用。

我的问题是某些用户可能会看到少于 5-10 条记录，这意味着不会为这些用户启用滚动，并且还需要为他们启用接受。请对如何执行此操作有任何建议吗？我尝试为名为“scrollDiv”和#scrollDiv 的div 标签添加一个ID，并将其作为ElementRef 传递，并在ngOnChange 上尝试获取offsetHeight 和scrollHeight，但在所有情况下我都得到值'0'。有人可以帮我吗这个？

我已经更新了我的问题。请给一些建议。谢谢你。

标签： javascriptangulartypescript

解决方案

我会尝试给你一个运行的想法，然后你可以理解并将它应用到你的案例中。你可以在这个链接上查看。

示例说明

在组件中，您需要考虑 4 个重要事项：

  • isActionDisabled一个变量，表示您的操作是否应该被禁用
  • @ViewChild('containerElement') containerElementa 引用表格的可滚动容器
  • onScrollContainer滚动时执行的方法containerElement
  • disableByScrollisActionDisabled根据滚动条的位置改变 的值的方法containerElement。如果它在底部isActionDisabled，false否则就是true。

最重要的方法是disableByScroll：

disableByScroll(): void {
  if (this.containerElement) {
    const element = this.containerElement.nativeElement;
    this.isActionDisabled = !(
      element.scrollTop ===
      element.scrollHeight - element.clientHeight
    );
  } else {
    this.isActionDisabled = true;
  }
}

请阅读这篇文章以了解我的所作所为。 disableByScroll每次调用滚动事件时调用containerElement

onScrollContainer(): void {
  this.disableByScroll();
}

并在查看初始化之后

ngAfterViewInit(): void {
  this.disableByScroll();
  this.cdr.detectChanges();
}

如果您有许多未激活滚动条的项目，这将很有用。请阅读本指南以了解Angular 应用程序的生命周期事件。如您所见，我调用detectChanges了ChangeDetectorRef. 阅读该指南，您将了解原因。

关于模板，它非常简单，您可以弄清楚。

推荐阅读