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

Posted 2023-05-07

【中文标题】jsp中多个文本区域的通用滚动条

【英文标题】：Common Scrollbar for multiple text area in jsp

【发布时间】：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 中的示例。