How do I give a scrolling div focus on pageload with JS/jQuery?

Question

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

When you load this page, and try hitting space bar, page up/down or use the scroll wheel on your mouse, it doesnt scroll at all. This is because the page is wrapped inside a secondary "viewport" in order to place the facebook bar in the bottom of the page.

When you click anywhere on the page, you give the div focus, and the keys/mousewheel works fine.

Is there any way to set this focus trough JavaScript or jQuery in order to make the keys/mousewheel work?

Cheers, Ole Marius

Answer 1

Did you consider positioning the bar fixed and getting rid of your extra viewport?

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

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

html, body {
  height: 100%;
}

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

There's plenty to consider and test (scrolling with mouse wheel, keyboard, touch swipe, what do you have) that you wouldn't have to if you kept the standard.