はじめに
検索してもそのものズバリが出てこなくて、あれこれ試行錯誤して一応動いたので書き残します。
やりたいこと
似通ったHTMLページを複数横に並べて、目で比較したい。複数コンテンツ同時表示だけならiframeで解決できるが、1画面に収まらないコンテンツを比較するため、同時に全iframeをスクロールさせたい。
前提条件
- jQueryを使っています。使わなくても書けるのかもしれませんが、、、
- HTTP Server経由で動きます。ローカルファイルではクロスサイト扱いされるようで動きません。
- Google Chromeでのみ確認してます。
- クロスドメインは動きません(
iframeの制限)。
ソースコード
<html>
<head>
</head>
<body>
<script src="https://code.jquery.com/jquery.js"></script>
<script>
$(function() {
$(window).on("load", function(e){
$('iframe').last().contents().scroll(function(e) {
$("iframe").contents().each(function(index) {
if (index < $("iframe").length - 1) {
$(this).scrollTop($("iframe").last().contents().scrollTop());
}
});
});
});
});
</script>
<iframe width=30% height=100% src="./A.html" scrolling=no></iframe>
<iframe width=30% height=100% src="./B.html" scrolling=no></iframe>
<iframe width=30% height=100% src="./C.html"></iframe>
</body>
</html>
解説
iframeでA,B,Cという複数ページを読み込むのですが、最後のページでスクロールイベントが発生したときに処理を走らせます。
処理内容は、最後のページ以外のスクロール位置を、最後のページの位置に合わせるというものです。
そして、最後のページ以外はスクロールバーを隠します。
すると、このサンプルでは A B C と並んで Cの右にスクロールバーが出ます。
料理方法
widthは並べるコンテンツ数に合わせて適宜。
文章みたいなものであれば、章などの区切りで揃うようスクロールさせられるといいかもしれません。
Qiitaの編集画面もそう言えば同時スクロールしてますね。こちらはどちらにもスクロールバーがついています。位置をずらしたらずらしたままスクロールさせるのもひとつのやりかたかもしれません。
最後に
jQuery初めて使ってみました。よくわかりません。。