在頁面加載時使DIV成爲默認滾動

我在div內部有一個div，這實際上是頁面的主要內容（由於客戶端希望它滑入頁面並具有視差效果）。 body有overflow: hidden,div與內容有overflow-x: hidden; overflow-y: auto;（所以垂直滾動工作）。在頁面加載時使DIV成爲默認滾動

不幸的是，如果用戶加載頁面，並立即按下PGNDN或滾動鼠標，它會嘗試滾動body標籤。

如果用戶點擊div中的內容中的任意位置，然後按下PGNDN或滾動鼠標，則滾動正確的內容。

如何模仿用戶在頁面加載中點擊此div，以便即使他們不點擊內容，所有滾動事件將滾動頁面內容而不是body。

我試過把tabindex=0加到div。我也嘗試添加一個ID並強制使用JS進行焦點。無論

document.getElementById('focus').scrollIntoView();

也不

window.location.hash = '#focus';

爲我工作。

jQuery可用。

下面是一個例子JSFiddle

來源

2016-01-25 Chuck Le Butt

您應該能夠設置'溢出：隱藏; '對所有你不想滾動的父母。沒有？ – ntgCleaner

您是否嘗試過document.getElementById（'Id'）。click（）載入頁面？ – Screech129

@ntgCleaner這隻會阻止滾動，並且默認情況下不會使滾動行爲專注於該div，並且我已經完成了...問題是存在頂部頁邊距集合，因此頁面將滾動頁面的距離保證金 - 即使沒有滾動條。 –

這裏是似乎運作良好的嘗試。

Updated fiddle（小提琴不工作在Firefox，但一個HTML頁）

HTML

<div id="content" tabindex="0">

CSS

#content { 
    outline: none; /* remove the focus outline */ 
}

腳本的onload

var cn = document.getElementById('content'); 
cn.contentEditable=true;      /* appears only needed in fiddle demo */ 
cn.focus(); 
cn.contentEditable=false;      /* appears only needed in fiddle demo */

012我創建並加載您的演示爲一個html頁面（無小提琴）

更新

後，你其實並不需要cn.contentEditable = true/false

來源

2016-01-25 19:26:31 LGSon

在頁面加載時使DIV成爲默認滾動

回答

相關問題