2

我SELECT在网页中有一个元素，我希望它加载滚动到底部。在大多数浏览器中，我可以这样做：

myselect.scrollTop = myselect.scrollHeight;

虽然scrollHeight超出了界限，但浏览器会发现并适当地限制它。谷歌浏览器除外。我可以提交错误报告，但这并不能帮助我解决眼前的问题。所以我尝试了这个：

myselect.scrollTop = myselect.scrollHeight - myselect.clientHeight;

但这减去了太多——元素底部下方有一些项目。我也尝试过减法offsetHeight，但情况稍差。

有谁知道一种与浏览器无关的方法来正确计算scrollTop正确的边界，以便它可以与 Chrome 一起使用？

顺便说一句，我在 stackoverflow 上发现了这个问题： Cross-Browser method for setting ScrollTop of an element? . 也许这适用于 DIV，但不适用于 SELECT 元素和/或不适用于 Chrome。

谢谢！

更新：这是一个演示问题的 HTML 页面：

<html>
<head>

<style type="text/css">
.fields9{font-size:15px;height: 180px; width:420px; overflow: auto; border:1px solid #2d2b2d;}
</style>

</head>
<body>

<select multiple="multiple" size="10" id="myselect" class="fields9">
<option>firstone</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>lastone</option>
</select>

<script type="text/javascript">

element=document.getElementById("myselect");
//element.scrollTop = element.scrollHeight;
element.scrollTop = element.scrollHeight - element.clientHeight;

</script>

</body>
</html>

如果我在 Chrome 中查看这个，最后一个选项“lastone”大部分都被切断了。但是，如果我删除该class="fields9"属性，问题就会消失。

4

1 回答 1

2

摆脱 overflow: auto in fields9 声明，使其在 Firefox 和 Chrome 中正常工作。这是工作示例：http: //jsfiddle.net/c4LDv/7/。

可悲的是，我无法找到使其在 Opera 中工作的任何解决方案 - 显然您无法在 Opera 中以编程方式滚动选择...

编辑：我想出了一种骇人听闻的方法，使用 selectedIndex 触发滚动到最后一个选项。在这里查看：http: //jsfiddle.net/c4LDv/16/它适用于 Chrome、Firefox 和 Opera。但是- 如果已经选择了一个或多个选项（在页面加载时），它不会向下滚动到 Opera 中的最后一个选项 - 在此处查看http://jsfiddle.net/c4LDv/15/ - 我无法覆盖这种行为。

于 2011-11-08T10:20:19.530 回答