jsp中多个文本区域的通用滚动条

Question

我在jsp中有8个文本区域。如何为所有8个文本区域启用通用滚动条（水平滚动条）？

Answer 1

这与JSP无关。您可以通过使用javascript实现类似的效果，将textareas中的滚动条与给定值同步。您可以通过scrollLeft属性设置textarea的水平滚动量。 scrollWidth属性将为您提供每个文本区域的总可滚动长度。

例如，您可以使用jQuery创建一个滑块组件，并使用其slide()方法将每个textarea的滚动量动态更改为百分比。

<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">元素。请参阅此other fiddle中的示例。