1

視差スクロールを組み込みたいページがあります。ただし、現在のコードでは、スクロールを登録できません。

javascriptを使用せずに、含まれるdivの高さと幅を100%にする必要があるため、ページ全体にコンテナがあります。

しかし今では、スクロールで何も実行できなくなりました。どんな助けでも大歓迎です。

私が問題から作ったフィドルを見てください。

問題は、次の組み合わせで発生します。

HTML:

<div class="main">
    <div class="page page-1">
        <p>content</p>
    </div>
    <div class="page page-2">
        <p>content</p>
    </div>
    <div class="page page-3">
        <p>content</p>
    </div>
</div>

CSS:

html, body {
    width: 100%;
    height: 100%;
}

.main {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: auto;
}

.page {
    height: 100%;
    width: 100%;
}

しかし今、スクロール イベントはもうキャプチャされません。

jQuery(document).ready(function(){
    jQuery(window).scroll(alert('scrolled'));
});

これを解決する方法はありますか?

4

2 に答える 2

2
  1. alertコードのデバッグには使用しないでください。を使用しconsoleます。

  2. 関数をイベント コールバックとして渡す必要がありますが、そうではありません。コードが解析されている間に実行するだけですalert()(そのため、スクロールではなくすぐにアラートが表示されます)。何も返さないため、 onscroll イベントにコールバックはありません。

  3. 実際にスクロールされる要素は.mainではなくwindowであるため、リスナーを にアタッチし.mainます。

これをすべてまとめると:

jQuery(function(){
    jQuery('.main').on('scroll', function(e){ console.log(e) });
});

http://jsfiddle.net/zTeE8/1/

本当に警告が必要な場合は、jQuery('.main').on('scroll', function(e){ alert("scrolled") });

于 2013-09-16T15:11:46.697 に答える
1

.mainこれは、ウィンドウではなくクラスでdiv をスクロールするという事実と関係があります。試す$('.main').scroll(alert('scrolled'));

于 2013-09-16T15:09:18.097 に答える