2012-11-06 151 views
1

我使用擴展頁面對話框驗證了我的表單。當用戶需要更正輸入時,彈出包含錯誤消息的對話框。如何滾動瀏覽器窗口?

對話框中有一個OK按鈕,用於關閉對話框並將焦點設置到需要更正的字段。

var ef = dojo.byId(errorField); 
ef.focus(); 

這是除了......

工作極大我已經一組按鈕和一堆漂浮到窗體的頂部等組成。

它們位於具有以下CSS的面板內。

.PNCToolBar2 { 
position:fixed; 
top:68px; 
left:0px; 
width:100%; 
height:40px; 
color:#fff; 
background-color:#F2F2F2; 
padding-top:6.0px; 
padding-left:15.0px 
} 

正在發生的事情是,如果失敗的領域是「按鈕欄」下向上滾動,然後在瀏覽器滾動了一下,試圖讓按鈕成爲關注的焦點,但還不夠。根據用戶在窗體上滾動瀏覽器的方式,錯誤字段的全部或部分可能仍然被按鈕欄隱藏。

有沒有一種方法可以首先知道該字段是否位於欄下的瀏覽器窗口的頂部,並且如果要使該字段顯示則稍微滑動一點?如果是這樣如何?

回答

4

嘗試:

dojo.window.scrollIntoView(ef); 

如果EF代表的DOM節點不是當前在屏幕上,道場將滾動,剛好夠使這將是。

More info on this method

+0

這沒有奏效。請記住它是「在視野中」。它只是在一個浮動面板下。 –

+0

得到這個工作。這很簡單。我所做的只是滾動到0,0然後設置焦點。 –

0

使用,你可以使用JavaScript的scrollTo()方法 http://www.w3schools.com/jsref/met_win_scrollto.asp

+0

這看起來像它會工作,但我怎麼會得到一個字段的位置?我需要在這裏做的是把焦點設置到該領域,得到它的X軸,如果它在酒吧下面,然後添加100px左右,就得到它的Y軸。然後滾動到這些座標。 –

+1

哎呀在上面的錯誤帖子中留言。我使用了上面提到的滾動方法Adrian。滾動到0,0然後設置焦點。它始終將視野放在視野中。很簡單 –