Javascript：以编程方式在Chrome中将非弹出式SELECT元素滚动到底部 [英] Javascript: Programmatically scroll non-popup SELECT element to bottom in 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;宽度：420PX;溢出：自动; border：1px solid＃2d2b2d;}
< / style>
< / head>
< body>
< select multiple =multiplesize =10id =myselectclass =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> 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属性，问题就会消失。
摆脱fields9声明中的overflow：auto，使其在Firefox和Chrome中正常工作。这是一个工作示例： http://jsfiddle.net/c4LDv/7/ 。
很遗憾，我无法找到任何解决方案让它在Opera中工作 - 显然，您不能在Opera中以编程方式滚动选择...
编辑：我想出了一个诡异的方法，使用selectedIndex触发滚动到最后一个选项。点击此处查看： http://jsfiddle.net/c4LDv/16/ 它可以在Chrome， Firefox和Opera。 然而 - 如果已经选择了一个或多个选项（在页面加载时），它将不会向下滚动到Opera的最后一个选项 - 在此处查看 http://jsfiddle.net/c4LDv/15/ - 我无法覆盖此行为。
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.
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.
这篇关于Javascript：以编程方式在Chrome中将非弹出式SELECT元素滚动到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
