そこで、フルスクリーン セクションがビューポート内にあるときに、いくつかの関数を呼び出そうとしています。セクションが 7 つあるとします。特定のセクションがビューポート内にあるときに何かが起こるようにしたいとします (セクションをビューポートにスナップする関数があるため、ビューポート内に複数のセクションが存在することはありませんが、ビューポートにどのセクションが表示されるかを調べようとしています)。
ここにフィドルがあります:http://jsfiddle.net/h7Hb7/2/
function isInViewport() {
$("section").each(function () {
var $this = $(this),
wHeight = $(window).height(),
rect = $this.getBoundingClientRect(); // Error in console
// Borrowed from http://stackoverflow.com/a/7557433/5628
if (rect.top >= 0 && rect.bottom <= wHeight) {
console.log($this.attr("id") + "in viewport");
}
});
}
$(window).scroll(function () {
// Other functions are called inside the setTimeout function, can't remove
clearTimeout($.data(this, "scrollTimer"));
$.data(this, "scrollTimer", setTimeout(function () {
isInViewport();
}, 1200));
});
どこから調べ始めればよいかわかりませんが、each 関数に関係しているのではないかと思います。問題を引き起こすのは each 関数ですか? CSS がすでに読み込まれているときにスクロールすると問題が発生するため、CSS の問題ではない可能性があります。
ベストアンサー1
jQuery を使い続けて配列 [] 表記を使用することもできます。例:
var myClient = $(currentGrid)[0].getBoundingClientRect();
alert(myClient.top)