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

Question

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

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