web-dev-qa-db-ja.com

ウィンドウの代わりに親スクロールdivに関連するオフセットを見つける

ウィンドウ内にスクロール要素があります。

オーバーフローオートを備えたクラス「currentContainer」を持つディビジョンがあるとします。そのディビジョンには、スクロールするのに十分な大きさのテキストが大量に含まれています。

ここで、「currentContainer」が下にスクロールした量と、親のスクロールdiv（「currentCoantainer」）からの特定の要素のオフセットに基づいて、いくつかの計算を行う必要があります。

しかし、オフセットを計算している間、「currentContainer」ではなく、ウィンドウに関する内側の子要素のオフセットを常に取得します。

JS FIDDLE

@Shikkediel position().topの代わりにoffset().topを使用してみましたが、同じ結果も得られています。それを見てください：

JS FIDDLE 2

使用を提案しないでください：

_$("<reference of scrolling element").scrollTop() 
+ 
$("<reference of child element whose offset I want to calculate>").offset().top
_

これは私がこれからやろうとしている私の実際の計算を複雑にするためです。

上記のアプローチを使用したくない理由は、すでに面倒すぎてウィンドウに関しては完全に機能している既存のコードを変更しようとしているためです。親スクロールdiv。

上記のアプローチを試してみましたが、カニの箱が開きました。関数が密結合しすぎているためです。だから私は私がシンプルでストレートな解決策を得ることができるかどうか、つまり.offset().topを他のもので置き換えるかどうかを考えます。

私はコードをデバッグしようとしましたが、まだ運がありません http://jsfiddle.net/arpitajain/kwkm7com/ に実際のコードを追加しました

追伸実際のコードですが、完全ではありません。残りのコードはこのエラーでは必要ありませんでした。

jquerycssscrolloverflowscrolltop
16
Arpita

子要素のオフセットから親要素のオフセットを差し引くだけです。それはあなたがする必要がある他のことも複雑にしますか？

$(".getoffset").offset().top - $(".getoffset").offsetParent().offset().top

http://jsfiddle.net/kmLr07oh/2/

15
Tim Mullen

これはおそらくあなたが探しているものです

var scrollOffset = $(".container .element")[0].offsetTop - $(".container")[0].offsetTop

———————————

背景が必要な場合は、これでほとんどの方法が得られます。

// Position of first element relative to container top
var scrollTop = $(".container .element").offset().top - $(".container").offset().top;

// Position of selected element relative to container top
var targetTop = $(".container > *").offset().top - $(".container").offset().top;

// The offset of a scrollable container
var scrollOffset = scrollTop - targetTop;

// Scroll untill target element is at the top of its container
$(".container").scrollTop(scrollOffset);

以下も参照してください。 スクロール可能なdiv内の要素のオフセット上部を計算

7
Quinn Keaveney

バニラJavascriptソリューションは次のようになります。

const el = document.querySelector('.getoffset');
const offset = el.getBoundingClientRect().top - el.offsetParent.getBoundingClientRect().top;

フィドル： http://jsfiddle.net/njb1xcz0/

2
andreivictor

私のテストでは

//has the same value
console.log(
    'compare:',
    $("#element").offset().left - $("#container").offset().left,
    $("#element").position().left
);

魔女は親に絶対位置を取得することを意味します。 相対位置を親に取得するには、次を使用します：

let relative_position_x = Element.position().left + scroller.scrollLeft();
let relative_position_y = Element.position().top + scroller.scrollTop();
0
Corxit Sun