web-dev-qa-db-ja.com

html要素の下部へのスクロールを検出する方法

Idで参照しているこの要素があります。

    let infiniteScrollElement = document.getElementById('th-infinite-scroll-tracker');

ブラウザーが要素の下部に到達したときにリッスンする必要があります。

これを達成する方法は？

angularangular2-templateangular2-directives
13
CommonSenseCode

スクロールの位置を検出するだけでいいと思います。

@HostListener("window:scroll", ["$event"])
onWindowScroll() {
//In chrome and some browser scroll is given to body tag
let pos = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.offsetHeight;
let max = document.documentElement.scrollHeight;
// pos/max will give you the distance between scroll bottom and and bottom of screen in percentage.
 if(pos == max )   {
 //Do your action here
 }
}

また、@ angular/coreからHostListenerをインポートすることを忘れないでください。

21
YASH DAVE

以下の方法で、ユーザーが一番下までスクロールしたかどうかを確認できます...

Htmlファイル

<div (scroll)="onScroll($event)">
    ...
    ...
</div>

TypeScriptファイル

import { Component, HostListener } from '@angular/core';
    ...
    ...
@HostListener('scroll', ['$event'])
onScroll(event: any) {
    // visible height + pixel scrolled >= total height 
    if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight) {
      console.log("End");
    }
}
25
Narottam Goyal

これは、コンテナのスクロールイベントを追跡しているオブザーバブルを使用して実行できます。

または、スクロールイベントをリッスンするコンポーネントのホストリスナーを作成できます。これをご覧ください SOの質問 。 （ホストリスナーでテストしていませんが、動作するはずです。）

監視可能なアプローチのためにコンポーネントに次のコードを追加します（この ブログ投稿 からコードの一部をコピーしました）。

  ngOnInit() {
    /*
     * Create the observable from an event, in this case, the window scroll event
     * then map each event so we can get a new value from it
     * i.e. over time, we are just dealing with a collection:
     * (map [e1, e2, e3, ...]) -> [t1, t2, t3, ...]
     */
    let tracker = document.getElementById('th-infinite-scroll-tracker');

    let windowYOffsetObservable = Observable.fromEvent(tracker, 'scroll').map(() => {
      // I don't actually care about the event, I just need to get the window offset (scroll position)
      return tracker.scrollTop;
    });

    // subscribe to our Observable so that for each new item, our callback runs
    // this is our event handler
    let scrollSubscription = windowYOffsetObservable.subscribe((scrollPos) => {
      let limit = tracker.scrollHeight - tracker.clientHeight;
      console.log(scrollPos, limit);
      if (scrollPos === limit) {
        alert('end reached');
      }
    });
  }

更新

別の方法で、おそらく最良の方法は、トラッキングロジックのディレクティブを作成することです。その後、HostListenerを簡単に使用してスクロールイベントにバインドできます。

TypeScriptコード：

import {
  Directive, HostListener
}
from '@angular/core';

@Directive({
  selector: '[scrollTracker]'
})
export class ScrollTrackerDirective {
  @HostListener('scroll', ['$event']);

  onScroll(event) {
    // do tracking
    // console.log('scrolled', event.target.scrollTop);
    // Listen to click events in the component
    let tracker = event.target;

    let limit = tracker.scrollHeight - tracker.clientHeight;
    console.log(event.target.scrollTop, limit);
    if (event.target.scrollTop === limit) {
      alert('end reached');
    }
  }

  constructor() {}
}

コンポーネントのマークアップ（ディレクティブを追加）

<div id="th-infinite-scroll-tracker" style="overflow-y:scroll; height: 500px;" scrollTracker>
  .... your container with scrollbar ...
</div>
14
AWolf

私は文字通りこれに取り組んでおり、これが「me」の最も用途の広いユースケースであることがわかりました。

YASH DAVE で述べたように、Angular 'onScroll）'実装には、ホストリスナーの使用が最善の策です。ただし、 、 'Window：Scroll'は私の使用例では機能しませんでした（ダッシュボード内に挿入されたテーブル）。だから私はこれをやって運が良かった

@HostListener('scroll', ['$event.target'])
 onScroll(elem){
  if(( elem.offsetHeight + elem.scrollTop) >=  elem.scrollHeight) {
     console.log("It's Lit");
  }
}'

CSS：

:Host {
     display: block;
     max-height: 700px;
     width: 100%;
     overflow-y: scroll;
     scroll-behavior: auto;
 }

説明：

  • 基本的に、汎用の「スクロール」は、Host要素で発生するスクロールイベントをリッスンします。
  • $ event.targetを介してスクロールイベントをトリガーした要素参照をonScroll（elem）に渡します方法
  • 次に、要素参照を取得し、offsetHeightとScrollTopがscrollHeightよりも大きいかどうかを判断します（はい、これは他の人がこれをどのように実装しているか）reference：mVChrの実装
  • それから、楽しんでください。
  • 注：必要な場合は、、これに十分なストレスをかけることはできません、simple solution特定の要素に（スクロール）イベントリスナーを追加するだけ

さらに、 This offsetHeight、clientHeight、scrollHeightに関する洞察を確認。

1
Ivens Applyrs