まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

タグ:scroll

jQuery を使って HTML の iframe の内側コンテンツを、iframe の外側の JavaScript からスクロールさせる方法を紹介します。

今回は2つの HTML ファイル(main.html と sub.html)を使います。main.html が iframe の外側(というか、iframe を記述する側)のファイルで、main.html の中の iframe に sub.html が指定されて埋め込まれて表示される、という関係だと想定します。sub.html はどんな内容でも構いませんが、強制スクロールさせて表示することを想定しているので、それなりに縦長の、普通に見ても縦スクロールさせないと全体が見えないくらいの大きさのページを使ってください:
2017113001

一方、iframe の外側である main.html が今回の主役で、main.html 内の JavaScript で sub.html をスクロールさせて表示させることが今回の目的です。実現するためには以下のような内容で記述します:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
$(function(){
  $('#sub').load( function(){
    iframe_scroll( 100 );
  });
});

function iframe_scroll( top ){
  //. 「0.8 秒で 100 ピクセルスクロールし、0.2 秒待つ」を繰り返す
  $('body,html', $('#sub').contents() ).animate( {scrollTop: top}, 800, 'swing' );
  setTimetout( iframe_scroll, 1000, top + 100 );
}
</script>
<title>main</title>
</head>
<body>
<h1>main</h1>
<hr/>
<iframe id="sub" src="./sub.html" width="90%" height="50%"></iframe>
</body>
</html>

jQuery を使って、まず sub.html がロードされた直後に( $('#sub').load() 関数内で)iframe_scroll 関数を実行しています。この関数では iframe 要素のコンテンツを取り出し、animate 関数を使ってスクロールさせています。この例では 0.8 秒かけて 100 ピクセル下にスクロールし、0.2 秒(1000 ミリ秒 - 800 ミリ秒)止まって繰り返す、という例を実装しています。

なお、sub.html をローカルで用意する代わりに外部コンテンツ(http://www.xxx.com/xxxxx.html など)を指定した場合、iframe 内に表示はされますが、クロスドメイン制約にかかって iframe 内の要素にアクセスすることができず、スクロールは行われません。ご注意ください。


jQuery を使うと、スクロールイベントを簡単に取得したり、スクロールイベントに対するハンドリング処理を実現できます:
$(window).scroll( function(){
  var scroll_top = $(this).scrollTop();  //. スクロール位置
    :
  (スクロール時の処理)
  console.log( 'top = ' + top );
    :
});

ただ、少し取扱が難しい面もあります。上記の内容のままだとスクロールを感知する毎にイベントが発生し、その全てをハンドリングすることになります。要するに一回のスクロールの中で何度もこの処理を繰り返すことになります。

これを「スクロールが一段落したらハンドリング処理を行う」ように改良してみます。考え方として一定時間(以下の例では 200 ミリ秒)スクロールイベントが発生しなかったらハンドリングする、という考え方で擬似的に実装してみました:
var timer = false;
$(window).scroll( function(){
  if( timer !== false ){
    clearTimeout( timer );
  }
  timer = setTimeout( function(){
    var scroll_top = $(this).scrollTop();  //. スクロール位置
      :
    (スクロール時の処理)
    console.log( 'top = ' + top );
      :
  }, 200 );
});

青字が追加した部分です。考え方としてはスクロール発生時に 200 ミリ秒のタイマーを設定し、200 ミリ秒以内に同じイベントが発生したらタイマーを再度設定し直しています。そして200ミリ秒間同一のイベントが発生しなかった場合にハンドリング処理を行う、というアルゴリズムです。

これで擬似的にスクロールエンドのイベントに対するハンドリング処理を実現できました。

(参考)
http://www.web-labo.jp/archives/963

このページのトップヘ