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中的示例。