Javascript：以編程方式將非彈出式SELECT元素滾動到Chrome中的底部

我在網頁中有一個SELECT元素，並且我希望它將滾動加載到底部。在大多數的瀏覽器，我可以這樣做：Javascript：以編程方式將非彈出式SELECT元素滾動到Chrome中的底部

myselect.scrollTop = myselect.scrollHeight;

雖然scrollHeight是出界，瀏覽器明白這一點，並適當地限制它。除谷歌瀏覽器外。我可以提交錯誤報告，但這並不能幫助我解決眼前的問題。所以我試過這個：

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

但是減去太多 - 有元素底部以下的項目。我也試過減去offsetHeight，但那個比較糟糕。

有誰知道瀏覽器不可知的方式來正確計算scrollTop是正確的入境，所以它將與Chrome一起工作？

順便說一下，我發現這個問題上的計算器：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"屬性，問題就會消失。

來源

2011-11-02 Timothy Miller

你可以設置一個jsfiddle來顯示問題，因爲scrollHeight工作在chrome中，我一直都在使用它。 – Ryan

我希望我粘貼在我編輯的代碼是你正在尋找的。 –

擺脫overflow：auto在fields9聲明中使其在Firefox和Chrome中正常工作。這裏是工作示例：http://jsfiddle.net/c4LDv/7/。

可悲的是，我沒能找到使得它在Opera工作，任何解決辦法 - 顯然你不能滾動選擇編程方式在歌劇...

編輯：我來了採用hackish的方法，使用selectedIndex觸發滾動到最後一個選項。點擊此處查看：http://jsfiddle.net/c4LDv/16/它可以在Chrome，Firefox和Opera中使用。但是 - 如果已經選擇了一個或多個選項（頁面加載），它將不會向下滾動到Opera的最後一個選項 - 在此處查看http://jsfiddle.net/c4LDv/15/ - 我無法覆蓋此行爲。

來源

2011-11-08 10:20:19 WTK

Javascript：以編程方式將非彈出式SELECT元素滾動到Chrome中的底部

回答

相關問題