在Chrome中以编程方式滚动非弹出式SELECT元素到底部

Javascript: Programmatically scroll non-popup SELECT element to bottom in Chrome

本文关键字：SELECT 弹出式 元素 底部 滚动 Chrome 编程 方式      更新时间：2023-09-26

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

myselect.scrollTop = myselect.scrollHeight;

虽然scrollHeight是越界的，浏览器发现并适当地限制它。除了在谷歌浏览器。我可以提交错误报告，但这并不能帮助我解决眼前的问题。所以我试着这样做:

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

但是这样做的效果太大了——在元素的底部还有一些项目。我还试着减去offsetHeight，但这稍微更糟。

有没有人知道一个浏览器无关的方法来正确计算scrollTop是正确的，所以它将与Chrome一起工作?

顺便说一句，我在stackoverflow上发现了这个问题:设置元素滚动顶部的跨浏览器方法?也许这适用于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"属性，问题就会消失。

去掉overflow: auto in fields9声明，使其在Firefox和Chrome中正常工作。下面是工作示例:http://jsfiddle.net/c4LDv/7/.

遗憾的是，我没能找到任何解决方案使它在Opera中工作-显然你不能在Opera中以编程方式滚动选择…

Edit:我想出了一个简单的方法，使用selectedIndex来触发滚动到最后一个选项。在这里查看:http://jsfiddle.net/c4LDv/16/它可以在Chrome, Firefox和Opera中工作。然而 -它不会向下滚动到最后一个选项在Opera中，如果一个或多个选项已经被选中(在页面加载时)-看到它在这里http://jsfiddle.net/c4LDv/15/-我不能覆盖这个行为

相关文章：