Javascript：以编程方式将非弹出式 SELECT 元素滚动到 Chrome 底部答案

【问题标题】：Javascript: Programmatically scroll non-popup SELECT element to bottom in ChromeJavascript：以编程方式将非弹出式 SELECT 元素滚动到 Chrome 底部
【发布时间】：2011-11-02 16:38:42
【问题描述】：

我在网页中有一个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" 属性，问题就会消失。

【问题讨论】：

你能设置一个jsfiddle来显示问题吗，因为scrollHeight在chrome中工作，我一直在使用它。
我希望我在编辑中粘贴的代码是您想要的。

标签： javascript html select scrolltop

【解决方案1】：

去掉 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/ - 我无法覆盖此行为.

【讨论】：