0

要素が視点に出入りするタイミングを検出できる次のスクリプトを使用しています: https://github.com/thesmart/jquery-scrollspy

著者が提供する例はうまく機能し、そのコードは次のとおりです。

この部分は、基本的に画面上のすべての要素を作成します。

var body = $('body');
for (var i = 0; i < 100; ++i) {
    var element = $('<div id="tile-' + i + '" class="tile"><h2>Tile #' + i + '</h2></div>');
    body.append(element);
}

これはすべての要素のスタイルです:

.tile {
    width: 290px;
    height: 290px;
    float: left;
    border: 1px solid #999;
    margin: 4px;
}

これは、要素が視点に出入りするタイミングをチェックする ScrollSpy スクリプトです。

$('.tile').on('scrollSpy:enter', function() {
    console.log('enter:', $(this).attr('id'));
});

$('.tile').on('scrollSpy:exit', function() {
    console.log('exit:', $(this).attr('id'));
});

$('.tile').scrollSpy();

これまでのところ、例のファイルのすべてが機能しています。今私がやろうとしたことは、自分の要素を手動で入力することです:

<div id="tile-220" class="tile"><h2>Tile #220</h2></div>

次に、同じ ScrollSpy コードを使用しますが、更新して同じ結果が得られるかどうかを確認します。

$('#tile-220').on('scrollSpy:enter', function() {
    alert("test");
});

$('#tile-220').on('scrollSpy:exit', function() {
    alert("test2");
});

$('#tile-220').scrollSpy();

これは何らかの理由で機能しません。#tile-220 の代わりに、最初のスクリプトで生成された #tile-90 などを使用すると、手動で追加した ID ではなく、うまく機能します。誰が私が欠けているものを理解するのを手伝ってくれますか?

事前にどうもありがとうございました！

4

1 に答える 1