私は、コンテナにフローティングの固定サイズのボックスのグリッドを持っています。 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().left
は310px
(スケーリング後)になります。
のスケーリングの前に、スケーリング係数を知らずに方法がありますか?私はネイティブDOMメソッドgetBoundingClientRect()
を見つけましたが、コンテナではなく(1)it still gives the position after scalingと(2)it's relative to the viewportです。
ありがとうございました。
私は混乱しています。あなたは質問をしてそれと同時に答えましたか?本質的にここに掲示しているので、将来他人を助けるかもしれないのですか? – Observer
@Observer、はい、実際はそれがアイデアです。 StackOverflowは、ユーザーが自分の質問に答えることを奨励しています:https://stackoverflow.com/help/self-answer。あなたは質問をするときに、質問と回答を同時に提出することができる「あなた自身の質問に答える」チェックボックスが下部にあります。これは実際に私の最初のことです。このウェブサイトから多くのことを学んだら、StackOverflowに貢献したかっただけです。 =) – DynamicDispatch
クール、私のコメントの質問に答えるためにありがとう! – Observer