javascript - 使 DIV 成为页面加载时的默认滚动条

Question

我在 div 中有一个 div 实际上是页面的主要内容(由于客户希望它以视差效果滑入页面的方式). body 有overflow: hidden，而包含内容的div 有overflow-x: hidden; overflow-y: auto;(因此垂直滚动有效)。

不幸的是，如果用户加载页面并立即按下 PGNDN 或滚动鼠标，它会尝试滚动 body 标签。

如果用户点击 div 中内容的任意位置，然后按下 PGNDN 或滚动鼠标，则会滚动正确的内容。

我如何模拟用户在页面加载时点击此 div，这样即使他们没有点击内容，所有滚动事件也会滚动页面内容而不是 body.

我已经尝试将 tabindex=0 添加到 div。我也试过添加一个 ID 并使用 JS 强制聚焦。都没有

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

也不

window.location.hash = '#focus';

为我工作。

jQuery 可用。

这是一个例子 JSFiddle

Answer 1

这是一个似乎很有效的尝试。

Updated fiddle (fiddle 在 firefox 中不起作用，但 html 页面可以)

HTML

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

CSS

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

脚本加载

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 */

---

更新

在我创建您的演示并将其加载为 html 页面(无 fiddle )之后，您实际上不需要 cn.contentEditable = true/false