scroll - 设计一个可滚动的网站？

Question

我是一个非常挑剔的人，作为笔记本电脑用户，大部分时间我都使用向上/向下翻页/向下翻页键来滚动页面。

每个网页似乎都分为以下几类:

页面完全拒绝用键盘滚动

如果我点击页面(有时多次)，页面会滚动

页面立即滚动奇妙

我如何专门设计我的网页，以便立即使用键盘键进行滚动？
什么样的元素会阻止这种情况？有什么我应该避免的具体事情吗？例如，我知道 iframe 和可滚动的 div 可能会成为这个目标的问题点。

Answer 1

一般规则是，当用户将焦点放在页面上时，所有网页都会滚动，但此焦点可以直接从页面转移到页面上的元素，从而将滚动事件处理程序放弃给该元素。例如，如果您的页面上有一个 Flash 电影并且用户点击播放，那么浏览器会将滚动事件发送到该电影，而不是主页的正文。 iFrame 和文本区域元素也是如此。

根据用户使用的操作系统，某些行为可能会有所不同；特别是“窗口焦点滚动能力”——因此在 OSX 用户可以简单地将鼠标悬停在可滚动内容上而无需单击并能够滚动它，而在 Windows 上，用户必须物理单击他们希望滚动的区域才能使窗口处于事件状态.事件窗口还会影响箭头键是否可以滚动页面。

要添加的最后一点是，您可以使用 CSS 属性“溢出”专门禁用滚动。默认情况下，它设置为“可见”——这意味着滚动条将始终出现在容器内容大于容器本身边界的地方。但是，您可以选择在 X 或 Y 平面或两者中禁用它 - 这将阻止使用鼠标和键盘滚动。