使滾動鍵滾動適當的頁面元素

Question

我的頁面中有一個可滾動的DIV，而頁面上沒有其他元素。 （頁面佈局是用DIV本身上下的控件固定的。）我希望箭頭鍵和頁面向上/向下頁面在任何情況下都能滾動DIV，但我似乎無法這樣做，除非DIV實際上有焦點。其他DIV中還有其他輸入字段經常有焦點。我曾嘗試在文檔級別捕獲箭頭鍵和頁面/向下'keydown'事件，並直接模擬相同的事件（using answers from this question）到需要滾動的DIV，但不會發生滾動。我知道事件正在發送，因爲如果我附加一個事件處理程序，我會看到它，但由於某種原因它不會導致任何滾動。我也嘗試設置DIV的「tabIndex」屬性沒有區別。

我該如何指定一個特定的元素來接收這樣的特定鍵？當某些特定元素需要專注於特定鍵才能工作時，這些鍵只對頁面上的單個元素有意義，這對用戶來說非常不友好。必須不斷將焦點從另一個元素切換到可滾動區域以滾動並返回輸入數據是不可接受的。

我已經看到了可以用其他方法模擬滾動的建議，但是我想避開那條路線，因爲這並不總是產生相同的結果，而且我還想將它推廣到其他類型的關鍵事件和行爲滾動。

Answer 1

您可以通過調整其scrollTop DOM屬性來滾動任何元素。

如果捕獲所有文件上的​​事件，然後你要取決於按下的鍵（使用event對象的which屬性），也許一些其他情況（輸入集中採取什麼樣的行動作出決定，控制檢查等），你可以很容易地滾動你的div。查看this fiddle進行簡單演示。

Answer 2

您可以在文檔上按下按鍵或按鍵事件並在您的DIV上觸發操作。

$(document).ready(function(){ 


$(document).on("keydown", handleKeyDown); 

function handleKeyDown(evt) { 

var code = parseInt(evt.keyCode); // the key Code of the key which was pressed during the event /and parses it and returns a 'integer'. 


    if(code == 38){ // 38 is the keycode for UP key on the keyboard 
    alert("up"); 
    } else if(code == 40) // 40 is the keycode for down key on the keyboard. 
    alert("down"); 
    } 
    } 
    }); 

，並通過TadeášPeták在breif解釋，你可以使用scrollTop的DOM屬性滾動的任何元素，享受。