javascript - jsp の複数テキスト領域の共通スクロールバー

Question

jsp に 8 つのテキスト領域があります。8 つのテキスト領域すべてに共通のスクロールバー (水平スクロール バー) を有効にする方法は?

Answer 1

これは JSP とは関係ありません。javascript を使用して、テキストエリアのスクロールバーを特定の値に同期させる同様の効果を実現できます。プロパティを使用して、テキストエリアの水平スクロール量を設定できscrollLeftます。このscrollWidthプロパティは、各テキストエリアのスクロール可能な合計の長さを示します。

たとえば、jQueryを使用してスライダー コンポーネントを作成し、そのslide()メソッドを使用して、各テキスト領域のスクロール量をパーセンテージに動的に変更できます。

<textarea id="textarea1" 
    onscroll="document.getElementById('textarea2').scrollLeft = this.scrollLeft;">
    ... some text ... 
</textarea>

<textarea id="textarea2" 
    onscroll="document.getElementById('textarea1').scrollLeft = this.scrollLeft;">
    ... some text ... 
</textarea>

<div id="slider"></div>

<script>
$(function() {
    $( "#slider" ).slider({
        slide: function( event, ui ) {
        var val = ui.value/100;
        var t1 = document.getElementById('textarea1');
        t1.scrollLeft = val*t1.scrollWidth;
        var t2 = document.getElementById('textarea2');
        t2.scrollLeft = val*t2.scrollWidth;
        }
    });
});
</script>

このJSFiddleで動作することを確認してください。

jQuery を使用したくない場合は、HTML5<input type="range">要素を試すこともできます。この他のフィドルの例を参照してください。