Scroll 设计一个可滚动的网站?

Scroll 设计一个可滚动的网站?,scroll,Scroll,我是一个非常挑剔的人,作为一个笔记本电脑用户,大部分时间我都在使用向上/向下翻页向上/向下翻页键来滚动页面 每个网页似乎分为以下几类: 页面根本拒绝使用键盘滚动 如果我点击页面(有时多次),页面会滚动 这一页立刻就神奇地滚动起来 我该如何具体地设计我的网页,使其可以用键盘键直接滚动? 什么样的因素阻止了这一点;有什么我应该避免的事情吗?例如,我知道iFrame和可滚动div可能会成为实现此目标的问题点 一般规则是,当用户将焦点放在页面上时,所有网页都会滚动,但此焦点可以直接从页面转移到页面上

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

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

  • 页面根本拒绝使用键盘滚动
  • 如果我点击页面(有时多次),页面会滚动
  • 这一页立刻就神奇地滚动起来
我该如何具体地设计我的网页,使其可以用键盘键直接滚动?
什么样的因素阻止了这一点;有什么我应该避免的事情吗?例如,我知道iFrame和可滚动div可能会成为实现此目标的问题点

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

根据操作系统用户使用的操作系统,某些行为可能会有所不同;特别是“窗口焦点滚动功能”-因此在OSX上,用户只需将鼠标悬停在可滚动内容上,而无需单击即可滚动内容,而在Windows上,用户必须实际单击他们希望滚动的区域,以激活窗口。活动窗口还影响箭头键是否可以滚动页面


要添加的最后一点是,您可以使用CSS属性“overflow”专门禁用滚动。默认情况下,它设置为“可见”-这意味着当容器的内容大于容器本身的边界时,滚动条将始终显示。但是,您可以选择在X或Y平面禁用它,或同时在X或Y平面禁用它-这将阻止使用鼠标和键盘进行滚动。

正如Tom Walters所说,焦点可以在页面上的元素之间移动,因此有时箭头不会滚动整个页面

某些浏览器(如Opera)使用特定的键组合来更改箭头行为,例如,如果在按住CTRL键的同时按下Opera中的向上和向下箭头,则可以将焦点更改为页面的不同元素,而不是向上或向下滚动


使用JavaScript向网页添加新的滚动功能怎么样?允许组合键始终使页面向上或向下滚动,可能是整个屏幕(可见页面高度),怎么样?刚开始浏览你网站的新用户可能不会注意到这一点,但你可以花时间教他们,如果你(我们)在我们的网站上实现相同的功能,它可能会成为一个标准。

添加JavaScript功能是一回事,但我认为没有任何特定的插件或代码可以做到这一点。。它通常取决于页面的焦点。。flash电影在点击或选择它们时会引起注意。。因此,它可以防止按向上键和向下键滚动页面。。是的,就像Jose和Tom所说的。

正如其他答案中提到的,焦点可以转移到其他对象,例如防止页面滚动的flash对象

但是,您应该能够通过一个简单的jquery调用将其移回主文档,如

$(function(){ $(document).focus(); });
或者,如果flash内容也加载到“ready”事件上,则也可以延迟