How to configure div scrolling on pageload using JS / jQuery?

Question

See this page: http://ryan.rawswift.com/sandbox/fixed-bottom-bar/

When you load this page and try to get into the space, up or down the page or use the scroll wheel on your mouse, it does not scroll at all. This is because the page is wrapped in a secondary “viewport” to place the facebook panel at the bottom of the page.

When you click anywhere on the page, you get the focus of the div, and the keys / mouse wheel work fine.

Is there a way to set this focus through JavaScript or jQuery to make the keys / mouse work?

Cheers, Ole Marius

Answer 1

Do you think that the position is fixed and free from an additional viewing window?

#facebookbar { position: fixed; bottom: 0; left: 0; width: 96%; padding: .6em 2%; } 

You will need a document element to fill the viewport, of course:

 html, body { height: 100%; } 

Using an extra div seems more like a hack, and changing the standard behavior is never a good idea.

There are many possibilities for review and testing (scrolling with the mouse wheel, keyboard, touch screen that you have) that you do not need if you keep the standard.