爲html定義溢出時，鍵盤向下按鈕不起作用

使用定義的overflow時遇到了一個特殊問題。爲html定義溢出時，鍵盤向下按鈕不起作用

當我使用以下任一：

html, body { 
    overflow-x: hidden; 
    overflow-y: auto; 
    // OR 
    overflow-x: hidden; 
    overflow-y: scroll; 
    // OR 
    overflow: auto; 
}

向下按鈕將不會滾動頁面，直到我點擊該文件。不過，使用鼠標滾動仍然可以正常工作。當我沒有定義一個overflow時，這個問題不會發生，這對我現在正在做的事很好，但我仍然想知道爲什麼會這樣。

小提琴：http://jsfiddle.net/Shiazure/K552t/

使用Windows 7 SP1，瀏覽器測試是Chrome和FF（兩者最近）

來源

2014-03-01 Richard Shi

你可以做小提琴嗎？然後我們會知道我們都在談論完全相同的設置。還提到了瀏覽器和操作系統（Windows會傾向於滾動當前活動的窗口; Linux是鼠標恰好結束的窗口）。 –

@MrLister我添加了您要求的信息。 Win7 SP1，Chrome＆FF和小提琴就在那裏。 –

如果沒有overflow財產，沒有任何東西可以滾動。這就解釋了溢出與否之間的區別。（請注意，未指定overflow表示它默認爲visible，而不是auto，請參閱W3C）。

現在，您無法使用向下箭頭進行滾動，因爲加載頁面時主體未聚焦。

解決方案：確保身體有重點。在小提琴中，這是通過添加一點Javascript來完成的

document.body.tabIndex = '0'; 
document.body.focus();

請參閱updated fiddle。
第二行將焦點設置爲正文。 Chrome中需要第一行，以確保身體實際上可以聚焦。 Firefox只需要第二行。

您將無法看到小提琴本身的差異，因爲輸出是在一個單獨的框架中，但這是其框架外的頁面，其工作方式與廣告相同。比較您的原始"show"頁面。

來源

2014-03-02 10:39:50

非常感謝，隊友。奇蹟般有效。 –

爲html定義溢出時，鍵盤向下按鈕不起作用

回答

相關問題