JavaScriptでスクロールバーの位置を取得する方法は？

JavaScriptを使用してブラウザーのスクロールバーの位置を検出し、現在のビューがページのどこにあるかを判断しようとしています。私の推測では、トラックの親指がどこにあるかを検出し、次に親指の高さをトラックの全高のパーセンテージとして検出する必要があります。私はそれを複雑にしていますか、それともJavaScriptはそれよりも簡単なソリューションを提供していますか？コード的にアイデアはありますか？

element.scrollTopおよびelement.scrollLeftを使用して、スクロールされた垂直オフセットと水平オフセットをそれぞれ取得できます。あなたがページ全体を気elementにするdocument.bodyならそうすることができます。パーセンテージが必要な場合は、（再度、本文である場合があります）element.offsetHeightと比較できます。element.offsetWidthelement

<div>Chromeでこれを行いました。

element .scrollTop-スクロールのために上部に隠されたピクセルです。スクロールしない場合、その値は0です。

element .scrollHeight -div全体のピクセルです。

element .clientHeight-ブラウザに表示されるピクセルです。

var a = element.scrollTop;

ポジションになります。

var b = element.scrollHeight - element.clientHeight;

scrollTopの最大値になります。

var c = a / b;

スクロールのパーセントになります[0から1まで]。

document.getScroll = function() {
    if (window.pageYOffset != undefined) {
        return [pageXOffset, pageYOffset];
    } else {
        var sx, sy, d = document,
            r = d.documentElement,
            b = d.body;
        sx = r.scrollLeft || b.scrollLeft || 0;
        sy = r.scrollTop || b.scrollTop || 0;
        return [sx, sy];
    }
}

2つの整数の配列を返します-[scrollLeft、scrollTop]

こんな感じです ：）

window.addEventListener("scroll", function (event) {
    var scroll = this.scrollY;
    console.log(scroll)
});

2018年の回答：

このようなことを行う最良の方法は、Intersection Observer APIを使用することです。

Intersection Observer APIは、ターゲット要素と祖先要素またはトップレベルのドキュメントのビューポートとの交差の変化を非同期で監視する方法を提供します。

これまで、要素の可視性、または2つの要素の相対的な可視性を検出することは、ソリューションが信頼できず、ブラウザやユーザーがアクセスするサイトの動作が遅くなる傾向があったため、困難な作業でした。残念ながら、Webが成熟するにつれて、この種の情報の必要性が高まっています。交差点情報は、次のような多くの理由で必要です。

• ページがスクロールされたときの画像やその他のコンテンツの遅延読み込み。
• ユーザーがページをめくる必要がないように、スクロールに応じてより多くのコンテンツがロードおよびレンダリングされる「無限スクロール」Webサイトの実装。
• 広告収入を計算するための広告の可視性のレポート。
• ユーザーに結果が表示されるかどうかに基づいて、タスクまたはアニメーションプロセスを実行するかどうかを決定します。

過去に発生した交差検出の実装には、影響を受けるすべての要素に必要な情報を構築するために、Element.getBoundingClientRect（）などのメソッドを呼び出すイベントハンドラーとループが含まれていました。このコードはすべてメインスレッドで実行されるため、これらのコードの1つでもパフォーマンスの問題を引き起こす可能性があります。サイトにこれらのテストが読み込まれると、事態は実に醜くなります。

次のコード例を参照してください。

var options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

var target = document.querySelector('#listItem');
observer.observe(target);

最新のブラウザのほとんどはIntersectionObserverをサポートしていますが、下位互換性のためにポリフィルを使用する必要があります。

ページ全体を気にする場合。あなたはこれを使うことができます：

document.body.getBoundingClientRect().top

jQueryを使用している場合、完璧な関数があります：.scrollTop（）

ここにドキュメント-> http://api.jquery.com/scrollTop/

注：この関数を使用して、位置を取得または設定できます。

参照：http : //api.jquery.com/?s=scroll

スクロール位置を取得する別の方法は次のとおりです

const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

次の関数は、スクロール座標値を保持するのに役立ちます。

const getScrollCoordinate = (el = window) => ({
  x: el.pageXOffset || el.scrollLeft,
  y: el.pageYOffset || el.scrollTop,
});

私はこの答えから少し変更を加えてこのアイデアを得ました。