Replicate space bar browser behaviour using jQuery

Question

Hi,

I'm using a bit hacky solution to bottom positon a "facebook chat bar" on my page, requiring the entire page to be inside a "viewport div" with overflow hidden and scrolling. So the entire webpage is inside this div.

The problem is that this disables the spacebar - until you click inside it. I gave up my attempt on giving the #viewport element focus, as it only worked in Firefox using

$("#viewport").focus().blur();

This is how far I've come to the solution:

$(document).keypress(function(event) {
  if (event.which === 32) {
    var $spaceScroll = $("#viewport").height();
    window.scrollBy($spaceScroll);
   ...then what?
  }
});

What's missing is to get the page to scroll down the value of $spaceScroll in pixels, but I cant find any easy way to do this except fancy smooth scrolling plugins. I want it as light as possible.

I use jQuery 1.4 and jQuery UI 1.7.2

Thanks!

Answer 1

Unless I have misunderstood your question...

window.scrollTo(0, $spaceScroll);