Webブラウザ自身の動作（３）
Webブラウザ画面がスクロールされた距離を表示

$('div#image').scroll(function(ev) {  //id=imageのスクロールをイベントする
  $('span#left').text(ev.target.scrollLeft);
  $('span#top').text(ev.target.scrollTop);
} );

※スクロール付きの画像をスクロールするとリアルタイムに数字で表示する。


実行後
スクロールの位置(左：0,上：0)


変更前のhtml
<div>スクロールの位置(左：<span id="left">0</span>,上：<span id="top">0</span>)</div>
<div id="image">
   <img src="../../../../resources/kaminari-mon.png" /><!--画面はdiv#imageよりも大きくないとスクロールできない-->
</div>

この他に。入力漏れのときにメッセージを表示するもの等がある。赤本p107参照
フォームに入力された文字列の変更履歴を表示。赤本p109参照
選択肢の変更履歴を表示。赤本p110参照