jsp中的多个文本区域的常见滚动条

Question

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

Answer 1

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

例如，您可以使用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中的示例。