jQuery 「イベント」スクロールを検出する

このイベントは、ブラウザ上のスクロールで発生します。window要素だけでなく、フレームやCSSでoverflow:scrollもしくはoverflow:autoが設定された要素も対象になります。

書式

$(対象要素).on('scroll', イベントハンドラ)
$(対象要素).trigger('scroll')
$(対象要素).scroll()

$('form').scroll(function(e){
   alert('scroll');
});
$('form').trigger('scroll');
$('form').scroll();

サンプル

スクロールイベントを検出する

<body>
  <div class="main">
    <div class="header">
      <h1>サンプル</h1>
    </div>
    <div class="content">
      <div class="kiji">
        奈良の田園風景<br>
        奈良市は本州の中西部にある奈良県の県庁所在地です。<br>
        平城京として栄えた<br>
        標準の行の高さ<br>
        「竹」と一口に言ってもたくさんあり世界には１２００種類の丈があるとも考えられています。<br>
        日本ではそのうち600種類が生息していると言われて、なかでもよく見るのは真竹、孟宗竹、淡竹の3種類です。<br>
        三大有用竹のなかでも竹のかごや器作りによく使われているのが真竹です。<br>
        曲げやすく割りそぎもしやすいので、竹細工に向いているのです。<br>
        身近なところに豊富にあった真竹が素材として優れた性質を備えていたからこそ、<br>
        暮らしの役に立つ多様な竹のかごや器が生まれたのです。<br>
      </div>
      <div class="desc"></div>
    </div>
    <div class="footer">
      <hr>
      <p class="copyright">2019 xxxx all rights reserved.</p>
    </div>
  </div>
  <script>
  $(document).ready(function(){
    $('.kiji').on('scroll', function(e) {
      $('.desc').append('スクロールしました<br>');
    });
  });
  </script>
  </body>

カテゴリー:JavaScriptjQueryイベント