Javascript：以编程方式将非弹出 SELECT 元素滚动到 Chrome 中的底部
我的网页中有一个 SELECT 元素，我希望它滚动到底部加载。在大多数浏览器中，我可以这样做：
myselect.scrollTop = myselect.scrollHeight;
尽管 scrollHeight 超出范围，但浏览器会发现并适当限制它。谷歌浏览器除外。我可以提交错误报告，但这并不能帮助我解决眼前的问题。所以我尝试了这个：
myselect.scrollTop = myselect.scrollHeight - myselect.clientHeight;
但这减少了太多——元素底部下方有一些项目。我还尝试减去 offsetHeight，但效果稍差。
有谁知道一种与浏览器无关的方法来正确计算正确入界的 scrollTop ，以便它可以与 Chrome 一起使用？
顺便说一句，我在 stackoverflow 上发现了这个问题： 跨浏览器方法设置元素的 ScrollTop？。也许这适用于 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" 属性，问题就会消失。
I have a SELECT element in a web page, and I'd like it to load scrolled to the bottom. In most browsers, I can do this:
myselect.scrollTop = myselect.scrollHeight;
Although scrollHeight is out of bounds, the browsers figure that out and limit it appropriately. Except in Google Chrome. I could file a bug report, but that doesn't help me with my immediate problem. So I tried this:
myselect.scrollTop = myselect.scrollHeight - myselect.clientHeight;
But that subtracted too much -- there were items below the bottom of the element. I also tried subtracting offsetHeight, but that was slightly worse.
Does anyone know a browser-agnostic way to properly calculate the scrollTop that is properly in-bounds so it'll work with Chrome?
BTW, I found this question on stackoverflow: Cross-Browser method for setting ScrollTop of an element?. Perhaps that works for DIVs, but not for SELECT elements and/or not in Chrome.
Thanks!
UPDATE: Here's an HTML page that demonstrates the problem:
<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>If I view this in Chrome, the last option "lastone" is mostly cut off the bottom. BUT, if I remove the class="fields9" attribute, the problem goes away.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
摆脱 fields9 声明中的 Overflow: auto ，使其在 Firefox 和 Chrome 中正常工作。这是工作示例：http://jsfiddle.net/c4LDv/7/。
遗憾的是，我无法找到任何解决方案使其在 Opera 中工作 - 显然你无法在 Opera 中以编程方式滚动选择...
编辑：我已经想出一种黑客方法，使用 selectedIndex 触发滚动到最后一个选项。在这里查看：http://jsfiddle.net/c4LDv/16/ 它可以在 Chrome 中使用，火狐和歌剧。 但是 - 如果已经选择了一个或多个选项（在页面加载时），它不会向下滚动到 Opera 中的最后一个选项 - 请在此处查看 http://jsfiddle.net/c4LDv/15/ - 我无法覆盖此行为。
Get rid of overflow: auto in fields9 declaration to make it work properly in Firefox and Chrome. Here's working example: http://jsfiddle.net/c4LDv/7/.
Sadly, I wasn't able to find any solution for making it work in Opera - apparently you can't scroll select programatically in Opera...
Edit: I've come up with a hackish approach, using selectedIndex to trigger scrolling to that last option. Check it out here: http://jsfiddle.net/c4LDv/16/ it work in Chrome, Firefox and Opera. However - it won't scroll down to last option in Opera if one or more option is already selected (on page load) - see it here http://jsfiddle.net/c4LDv/15/ - I wasn't able to override this behavior.