HTML | 选取框滚动量属性

在 HTML 中，我们可以创建一个选取框（下拉框）元素，用户可以在其中选择一个选项。当选取框中的选项超出了选取框可显示的范围时，我们可以使用滚动量属性来控制滚动条的行为。

滚动量属性

scrollHeight

scrollHeight 属性返回元素内容的总高度，包括溢出部分。也就是说，包括被隐藏的部分。该属性只读。

<select id="mySelect">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
  <option>Option 6</option>
  <option>Option 7</option>
  <option>Option 8</option>
  <option>Option 9</option>
  <option>Option 10</option>
  <option>Option 11</option>
  <option>Option 12</option>
</select>

<script>
  var mySelect = document.getElementById("mySelect");
  console.log(mySelect.scrollHeight);
</script>

上面的例子中，选取框的总高度为可见区域的高度（默认情况下是 1 个选项的高度），加上被隐藏选项的高度。

scrollTop

scrollTop 属性设置或返回元素的垂直滚动条位置。当滚动条在最顶端时，该属性的值为 0。该属性可读写。

<select id="mySelect">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
  <option>Option 6</option>
  <option>Option 7</option>
  <option>Option 8</option>
  <option>Option 9</option>
  <option>Option 10</option>
  <option>Option 11</option>
  <option>Option 12</option>
</select>

<script>
  var mySelect = document.getElementById("mySelect");
  mySelect.scrollTop = 100;
</script>

上面的例子中，我们将选取框的垂直滚动条位置设置为 100 像素。

scrollBottom

scrollBottom 属性返回元素内容底部距离可见区域底部的距离。也就是说，返回元素可滚动范围中未被滚动过的部分的高度。该属性只读。

<select id="mySelect">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
  <option>Option 6</option>
  <option>Option 7</option>
  <option>Option 8</option>
  <option>Option 9</option>
  <option>Option 10</option>
  <option>Option 11</option>
  <option>Option 12</option>
</select>

<script>
  var mySelect = document.getElementById("mySelect");
  console.log(mySelect.scrollHeight - mySelect.clientHeight - mySelect.scrollTop);
</script>

上面的例子中，我们使用 scrollBottom 属性计算了选取框中未被滚动过的部分的高度。

总结

通过使用滚动量属性，我们可以控制选取框的滚动条行为，使得用户可以在选取框中选择隐藏的选项。同时，我们也可以使用这些属性来动态计算选取框中未被滚动的部分的高度。