2016-06-17 4 views
0

私は、コンテナにフローティングの固定サイズのボックスのグリッドを持っています。 JS/jQueryを使用して、各ボックスの位置をコンテナに関連させて取得する必要があります。コンテナにposition: relativeを設定し、jQuery $box.position()を使用することができますが、<body>transform: scale()を使用してスケーリングされているため動作しません。 (私はthisに似たビューポートの幅に一致する<body>をスケーリング別のスクリプトを持っていますが、この質問のために、ちょうど<body>は、いくつかの任意のスケーリング係数でtransform: scale()を持っているだろうことを知っている。)`transform:scale()`の前に、どのようにして要素の位置を(コンテナに対して)得ることができますか?

jQueryの$box.position()は、位置を返すように見えますのスケーリング後、元の位置の前に、のスケーリングが必要です。たとえば、各ボックスにwidth: 300px; margin-right: 10pxがある場合、3番目の列のボックスはオフセット(スケーリング前)のオフセットが620pxのままである必要があります。しかし、にtransform: scale(0.5)がある場合、$box.position().left310px(スケーリング後)になります。

のスケーリングの前に、スケーリング係数を知らずに方法がありますか?私はネイティブDOMメソッドgetBoundingClientRect()を見つけましたが、コンテナではなく(1)it still gives the position after scalingと(2)it's relative to the viewportです。

ありがとうございました。

+0

私は混乱しています。あなたは質問をしてそれと同時に答えましたか?本質的にここに掲示しているので、将来他人を助けるかもしれないのですか? – Observer

+1

@Observer、はい、実際はそれがアイデアです。 StackOverflowは、ユーザーが自分の質問に答えることを奨励しています:https://stackoverflow.com/help/self-answer。あなたは質問をするときに、質問と回答を同時に提出することができる「あなた自身の質問に答える」チェックボックスが下部にあります。これは実際に私の最初のことです。このウェブサイトから多くのことを学んだら、StackOverflowに貢献したかっただけです。 =) – DynamicDispatch

+0

クール、私のコメントの質問に答えるためにありがとう! – Observer

答えて

0

ネイティブDOMプロパティoffsetLeftoffsetTopを代わりに使用してください。 Browser supportはよく見える:基本的にすべてのブラウザとIE8 +。私はこれらのプロパティを試してみましたが、少なくともChrome、Firefox、IE11でスケーリング前の正しい位置を与えるようです。

DOMプロパティがネイティブであるため、基になるDOM要素を最初に取得するには、$element[0]が必要です。$box[0].offsetLeft$box[0].offsetTopです。また、要素の境界線ボックスの左上隅の位置は、ではなく、の余白ボックスになります。

関連する問題