テキストのスクロール/JavaScript

ボタンを使ったスクロール

　ボタンをクリックするとスクロールするデモです。

　下ボタンをクリックすると下へスクロール、上ボタンをクリックすると上へスクロールします。

　サンプルコードは、以下の通りです。

<button type="button" id="button1">上</button>
<div id="test1" style="height:3em;overflow:auto;border-style:solid;">
テスト1行目<br>
テスト2行目<br>
テスト3行目<br>
テスト4行目<br>
テスト5行目<br>
</div>
<button type="button" id="button2">下</button>

<script>
var x1 = document.getElementById("test1");
var x2 = document.getElementById("button1");
var x3 = document.getElementById("button2");
x2.addEventListener("click", function(){x1.scrollTop = x1.scrollTop - 50;});
x3.addEventListener("click", function(){x1.scrollTop = x1.scrollTop + 50;});
</script>

　赤字部分で表示する高さを3emにし、overflowをauto(高さをはみ出るとスクロール)にする事でスクロールするようにしています。

　青字部分でボタン等をオブジェクトとして参照するようにしています。緑字部分はイベントリスナーです。ボタンがクリックされると、scrollTopを使って上下に50px移動するようにしています。

　尚、イベントリスナーについては、「イベント処理」の「イベントリスナー」をご参照下さい。

　又、デモでは幅を250pxにする、ボタンをセンタリングする等、サンプルコード以外に見た目を指定しています。これは、以降のデモも同じです。

下に自動スクロール

　文字を入力すると、テキストの最上部へ追加されて自動的に下へスクロールするデモです。

　テキストボックスに文字を入力してエンターキーを押すと、一番上に文字が追加されて全体が下にスクロールします。

　サンプルコードは、以下の通りです。

<form id="form1">
<input type="text" name="text1" id="text1">
</form>
<div id="test2" style="height:8em;overflow:auto;border-style:solid;">
テスト1行目<br>
テスト2行目<br>
テスト3行目<br>
テスト4行目<br>
テスト5行目<br>
</div>

<script>
function func1(event) {
    y2.innerHTML = document.getElementById('text1').value + "<br>" + y2.innerHTML;
    document.getElementById('text1').value = "";
    event.preventDefault();
}
var y1 = document.getElementById("form1");
var y2 = document.getElementById("test2");
y1.addEventListener("submit", func1);
</script>

　赤字部分で表示する高さを8emにし、overflowをautoにする事でスクロールするようにしています。

　青字部分でフォーム等をオブジェクトとして参照するようにしています。フォームをサブミット(エンターキーを押す)すると、func1が呼び出されます。func1の緑字部分では、入力した文字を枠内テキストの最初に追加しています。

　y2.innerHTMLが元からあるテキストで、〜valueは入力したテキストです。+で結合しているため、元からあるテキストの上に入力したテキストが追加されます。テキストの上に追加しているため、それ以降は下へ自動的にスクロールします。又、オレンジ部分では、テキストボックスを空白にしています。

　その下のevent.preventDefault();は、ページがリロードされないための処理です。詳細は、「イベント処理」の「イベントのキャンセル」をご参照下さい。

上に自動スクロール

　次は、文字を入力すると、テキストの最下部へ追加されて自動的に上へスクロールするデモです。

　テキストボックスに文字を入力してエンターキーを押すと、一番下に文字が追加されます。又、何度か入力して枠からはみ出るようになると、全体が上にスクロールします。

　サンプルコードは、以下の通りです。

<div id="test3" style="height:8em;overflow:auto;border-style:solid;">
テスト1行目<br>
テスト2行目<br>
テスト3行目<br>
テスト4行目<br>
テスト5行目<br>
</div>
<form id="form2">
<input type="text" name="text2" id="text2">
</form>

<script>
function func2(event) {
    z2.innerHTML = z2.innerHTML + document.getElementById('text2').value + "<br>";
    z2.scrollTop = z2.scrollHeight;
    document.getElementById('text2').value = "";
    event.preventDefault();
}
var z1 = document.getElementById("form2");
var z2 = document.getElementById("test3");
z1.addEventListener("submit", func2);
</script>

　下にスクロールする時と違うのは、赤と青字の部分です。赤字部分では、入力した文字を枠内テキストの最後に追加しています。

　又、青字部分は、scrollHeightでテキスト全体の高さを読み取り、scrollTopでその高さ分移動しています。つまり、毎回最下部を表示する事で、テキストが上にスクロールしているように見せています。

補足：CSSで最下部を表示

　先のサンプルコードは、JavaScriptで表示位置を最下部に移動していましたが、CSSで指定する事も出来ます。以下は、サンプルコードです。

<div style="height:8em;overflow:auto;border-style:solid;position:relative;">
<span id="test3" style="position:absolute;bottom:0px;">
テスト1行目<br>
テスト2行目<br>
テスト3行目<br>
テスト4行目<br>
テスト5行目<br>
</span>
</div>
<form id="form2">
<input type="text" name="text2" id="text2">
</form>

<script>
function func2(event) {
    z2.innerHTML = z2.innerHTML + document.getElementById('text2').value + "<br>";
    document.getElementById('text2').value = "";
    event.preventDefault();
}
var z1 = document.getElementById("form2");
var z2 = document.getElementById("test3");
z1.addEventListener("submit", func2);
</script>

　今度は、func2内でscrollTopを使って移動していません。その代わり、赤字部分で親要素を基準とするよう指定し、青字部分で親要素を基準として最下部を表示するようにしています。

　つまり、JavaScriptではなくCSSで最下部を表示し、テキストが上にスクロールしているように見せる事も出来ます。