web-dev-qa-db-ja.com

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

現在のビューがページ内のどこにあるかを判断するために、JavaScriptを使用してブラウザのスクロールバーの位置を検出しようとしています。私は、トラックの親指がどこにあるのか、そして親指の高さをトラックの高さ全体に対するパーセンテージで検出する必要があると思います。私はそれを過度に複雑にしていませんか、それともJavaScriptはそれよりも簡単な解決策を提供しますか？コード的に何かアイデアはありますか？

javascriptbrowserscrolldom-events
148
Paul

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

176
Max Shawabkeh

私はこれをChromeの<div>に対して行った。

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]になります。

112
Gatsby
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]の配列を返します

46
kennebec

こんな感じです ：）

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

2018年の回答：

そのようなことをする最善の方法は Intersection Observer API を使うことです。

交差オブザーバ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をサポートしています ですが、後方互換性のために polyfill を使うべきです。

9
str

もしあなたがjQueryを使っているのなら、あなたにぴったりの関数があります：.scrollTop（）

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

注意：この関数を使ってOR位置を設定することができます。

また参照してください： http://api.jquery.com/?s=scroll

4
Simon the Salmon

これはスクロール位置を取得するための他の方法です。

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