Designing a website to be scrollable?

I'm a really picky person and as a laptop user, most of the time I'm using my up/down pageup/pagedown keys to scroll the page.

Each webpage seems to fall into the following categories:

• the page refuses to scroll with the keyboard at all
• the page scrolls if i click on 开发者_如何转开发the page (sometimes multiple times)
• the page scrolls wonderfully right off the bat

How can I specifically design my webpages to be scrollable with keyboard keys right off the bat? What kinds of elements prevent this; are there specific things I should avoid? For example, I know that iframes and scrollable divs will probably become a problem spot for this goal.

The general rule is that all web pages scroll when the user has focus on the page, but this focus can shift from the page directly, to an element on the page, thus relinquishing the scroll event handler to that element. For example if you have a Flash movie on your page and the user clicks to play, the browser then sends the scroll event to that movie, and not the main page's body. This is also the case for iFrames and text-area elements.

Depending on what OS users are using some behaviour may differ; specifically 'window focus scroll-ability' - so on OSX users can simply mouse over scrollable content without clicking and be able to scroll through it, while on Windows, users have to physically click on the area they wish to scroll to make the window active. The active window also affects whether or not the arrow keys will work to scroll a page or not.

The final point to add is that you can specifically disable scrolling by using the CSS property 'overflow'. By default it is set to 'visible' - meaning scrollbars will always appear where the content of the container is larger that the bounds of the container itself. However you can choose to disable it in either the X or Y plane, or both - this would prevent scrolling using both the mouse and keyboard.

As Tom Walters said, the focus can shift between elements on page, thus sometimes the arrows will not scroll the whole page.

Some browsers such as Opera uses particular combinations of keys to change the arrows behaviors, for example if you press the up and down arrows in Opera while you keep the CTRL button down, you can change the focus to different elements of the page, rather than scrolling up or down.

What about using JavaScript to add new scrolling functionalities to your webpages? What about allowing a key combinations to always make the page scroll up or down, maybe by an entire screen (visible page height)? New users surfing your website may not catch this at first, but you can teach them with time, and if you (we) implement the same functionality in our websites, it may become a standard.

As mentioned in other answers, focus can be shifted to other objects such as flash objects preventing the scrolling of the page.

However you should be able to shift it back to the main document with a simple jquery call like;

$(function(){ $(document).focus(); });

Or alternatively with a delay, in case the flash content loads on the "ready" event as well.

adding JavaScript capability is one thing but i don't think there is any specific plugin or code to do so.. its generally depends on focus of the page.. flash movies grabs the attention while click or selecting them .. so it prevents the page to be scrolled hitting the up and down keys .. yes just like Jose and Tom said .