如何同步两个列表框的滚动

Question

我有两个一对一映射的列表框。它们也是可滚动的。我想同步这两个列表框之间的滚动。例如，如果我向下滚动第一个列表框，那么第二个列表框应该自动向下滚动相同数量的项目，这样两个列表框上的选项应该总是出现在同一行中。如何在JSF中实现这一点?

Answer 1

你可以用JavaScript做你想做的事情。我建议使用jQuery(或其他跨浏览器的JS库)来节省编写在所有主要浏览器中都能工作的普通JavaScript的麻烦。

如果生成的标记看起来像这样:

<select id="foo"><!-- snip options --></select>
<select id="bar"><!-- snip options --></select>

然后这个jQuery将使它们保持同步:

var bar = $('#bar').get(0);
$('#foo').change(function() {
    bar.selectedIndex = this.selectedIndex;
});

演示

Answer 2

看这个例子。

图片

<select id="foo" size="3">
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>
<select id="bar" size="3">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
var bar = document.querySelector("#bar");
$('#foo').scroll(function() {
  bar.scrollTop = this.scrollTop
  bar.scrollLeft = this.scrollLeft
  console.log(this.scrollTop+ ' ' + this.scrollLeft);
});

演示