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

【问题标题】：Common Scrollbar for multiple text area in jspjsp中多个文本区域的通用滚动条
【发布时间】：2013-02-14 23:42:49
【问题描述】：

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

【问题讨论】：

【解决方案1】：

这与 JSP 无关。您可以使用 javascript 实现类似的效果，将 textareas 中的滚动条同步到给定值。您可以通过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"> 元素。请参阅此 other fiddle 中的示例。

【讨论】：