如何在頁面加載時設置可滾動區域？

當我嘗試在線搜索時，我得到了試圖以編程方式滾動網頁的人的結果。這不是我的使命。我有一個website，我瀏覽到，然後嘗試使用鍵盤上/下或頁面上/下箭頭滾動，但它不會直到我單擊右側的主內容窗格（div.main-content）。如何在頁面加載時設置可滾動區域？

我的問題是，我在頁面底部的JavaScript（或可能在jQuery文檔加載事件結束時）寫入什麼，以使其滾動div？我試過$('.main-content').focus()，但那似乎不起作用。

來源

2016-12-08 Jeremy Foster

的[啓用格通過鍵盤無需點擊，滾動]可能的複製（http://stackoverflow.com/questions/12410856/enable-div-to-scroll-by-keyboard-沒有點擊） – Klinger

大多數瀏覽器不會讓你集中的任意元素，甚至是滾動的。嘗試使用tabIndex屬性/屬性。

這裏是會如果沒有設置tabIndex屬性/屬性設置爲默認值的例子。

var $mainContent = $('.main-content'); 
 
$mainContent.prop('tabIndex', $mainContent.prop('tabIndex')); 
 
$mainContent.focus();

.main-content { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    overflow: scroll; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="main-content"> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
</div>

來源

2016-12-08 04:55:16

這樣做，但我不明白'$ mainContent.prop（'tabIndex'，$ mainContent.prop（'tabIndex'））;'做。爲什麼遞歸？ –

@JeremyFoster它讀取當前屬性值，並在創建屬性的元素（如果未設置）上顯式設置它。如果該屬性被明確設置，它不會改變任何東西。如果未設置，則將其設置爲默認值。如果需要，您可以用特定值替換第二個參數，這會自動使用當前的計算值。 –

如果他們有tabindex屬性，可以集中注意力。

Jquery的docs：當它獲得焦點

焦點事件被髮送給一個元素。此事件隱式適用於有限的一組元素，如元素（input,select等）和鏈接（a href）。在近期的瀏覽器版本中，可以通過明確設置元素的tabindex屬性將事件擴展爲包含所有元素類型。一個元素可以通過鍵盤命令獲得焦點，例如Tab鍵，或者通過鼠標點擊元素獲得焦點。

所以，你可以試試這個：

var used = false; 
$(document).on('keydown', function(){ 
    if(!used){ 
    used = true; 
    $('.main-content').attr("tabindex", -1).focus(); 
    } 
});

來源

2016-12-08 04:54:52

如何在頁面加載時設置可滾動區域？

回答

相關問題