javascript - typescript kaydırma konumu

Angular UI kodumda, aşağıdaki gibi bir çağrı yapan bir bileşen sınıfım var

app.bileşen.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 aşağıdaki gibi görünüyor

<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 kodu aşağıdaki gibidir:

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); 
        }
    
    }
    
    }
}

Gördüğünüz gibi modal 3 DIV'e ayrılmıştır. 1. talimatlar, 2: tablo, 3. Kabul butonu Modalin kendisi sabit bir yüksekliğe sahip ve kaydırma gizlenmiş. Tabloya sahip olan div sabit bir yüksekliğe sahip ve taşma scroll ile sağlanıyor ve bu mükemmel bir şekilde çalışıyor. Şimdi tablo 30-50 kayıt içerebilir, bu yüzden dikey kaydırma etkinleştirilmiştir. Kabul butonunun 3. divde yalnızca kullanıcı tabloyu kaydırıp tüm kayıtları gördüğünde etkin olmasını istiyorum. Bu yüzden function (scroll)="onScroll($event)" yalnızca kaydırma tamamen kaydırıldığında etkinleşir ve bu mükemmel bir şekilde çalışır.

Benim sorum şu: Bazı kullanıcılar 5-10 kayıttan daha az görebilir, bu da kaydırmanın bu kullanıcılar için etkin olmayacağı anlamına gelir ve kabul de onlar için etkinleştirilmesi gerekir. Bunu nasıl yapabileceğimle ilgili herhangi bir öneriniz var mı lütfen? 'scrollDiv' adında bir div etiketi için bir id eklemeyi ve bunu bir ElementRef olarak geçirmeyi ve ngOnChange üzerinde offsetHeight ve scrollHeight değerlerini almaya çalıştım ama tüm durumlarda '0' değeri alıyorum. Biri bana bu konuda yardımcı olabilir mi?

Sorumu güncelledim. Lütfen bazı önerilerde bulunun. Teşekkür ederim.

Cevap #1

Size genel bir fikir vermeye çalışacağım, sonra bunu anlayabilir ve kendi durumunuza uygulayabilirsiniz. Bu bağlantıdan kontrol edebilirsiniz.

Örneğin Açıklaması

Bileşende dikkate almanız gereken 4 önemli şey var:

• isActionDisabled, eyleminizin devre dışı bırakılıp bırakılmayacağını söyleyen bir değişkendir
• @ViewChild('containerElement') containerElement tablonun kaydırılabilir konteynerine referans verir
• onScrollContainer, containerElement kaydırıldığında çalıştırılan bir yöntemdir
• disableByScroll, containerElement kaydırma çubuğunun konumuna göre isActionDisabled değerini değiştiren bir yöntemdir. Eğer alt kısımdaysa isActionDisabled false, aksi takdirde true olur.

En önemli yöntem disableByScroll:'dir

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

Yaptıklarımı anlamak için lütfen bu makaleyi okuyun. disableByScroll, containerElement üzerinde her bir kaydırma olayı çağrıldığında çağrılır

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

ve görünüm başlatıldıktan sonra

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

Bu, kaydırma çubuğunu etkinleştirmeyen bir dizi öğeniz varsa faydalıdır. Lütfen bir Angular uygulamasının yaşam döngüsü olaylarını anlamak için bu kılavuzu okuyun. Gördüğünüz gibi, bir ChangeDetectorRef yöntemini detectChanges olarak çağırdım. O kılavuzu okuyarak nedenini anlayacaksınız.

Şablona gelince, oldukça basit ve kendiniz çözebilirsiniz.