I need to catch when the PageUp/PageDown keys are pressed and an element is scrolled, but I've so far been unable to do so. I've tried

Listening for 'keydown' event**: an event triggers when a non-scrolling element is in focus, but when a scrolling element is in focus, no event fires

 $(window).on('keydown', function(e)
 {
    console.log(e.keyCode === 34);
 });

Listening for 'keypress' event**: no event triggers in any context

$(window).on('keypress', function(e)
{
    console.log("keypress"); //does nothing
});

Listening for 'scroll' event**: no event triggers in any context

$(window).scroll(function()
{
    console.log("scrolling"); //does nothing
});

I'm at a loss and I haven't been able to find any clues. I've tried my current code in a jsFiddle, and it works fine, so it must be something more specific.

I need to catch when the PageUp/PageDown keys are pressed and an element is scrolled, but I've so far been unable to do so. I've tried

Listening for 'keydown' event**: an event triggers when a non-scrolling element is in focus, but when a scrolling element is in focus, no event fires

 $(window).on('keydown', function(e)
 {
    console.log(e.keyCode === 34);
 });

Listening for 'keypress' event**: no event triggers in any context

$(window).on('keypress', function(e)
{
    console.log("keypress"); //does nothing
});

Listening for 'scroll' event**: no event triggers in any context

$(window).scroll(function()
{
    console.log("scrolling"); //does nothing
});

I'm at a loss and I haven't been able to find any clues. I've tried my current code in a jsFiddle, and it works fine, so it must be something more specific.

• javascript
• jquery
• events

• Forgot to include the brackets in the question, but they're there in the code. – DanTheMan Commented Nov 16, 2015 at 17:05

4 Answers 4

instead of window try to use document so it will consider current document on web page.

in your code there is bracket miss match.

 $(document).ready(function(){
     $(document).keypress(function(e){
      if(e.keyCode === 34){
         console.log('page down')
        }

    });
 

    $(document).keypress(function(e){
       console.log("keypress"); //console will print
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script>

hope this will work for you.

Can you try also ?

$(window).bind('keydown', function(event) {
  console.log(event.which === 33) });

The event.which property returns which keyboard key or mouse button was pressed for the event

Actually your syntax is incorrect you are missing a closing ) at the end of your function, you should write:

$(window).on('keydown', function(e) {
  console.log(e.keyCode === 34);
});

$(window).on('keypress', function(e) {
  console.log("keypress"); //does nothing
});

$(window).scroll(function() {
  console.log("scrolling"); //does nothing
});

#scroll {
  max-height: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="scroll">

  <br>fghfjkjgfj
  <br/>dfdfdfdf
  <br/>dfdsf
  <br/>
  <br/>
  <br/>dfdfdf
  <br/>
  <br/>
  <br/>ssdsds
  <br/>fdf
  <br/>
  <br/>
  <br/>
  <br/>fgfgfg
  <br/>End
</div>

And everything, will work as expected.

So the element I'm trying to scroll on is a SlickGrid table, and it has its own scrolling event.

So I wrote, based on their docs:

this.grid.onScroll.subscribe(function(e, args)
{
    console.log(e);
}

Now it is triggering on Page Down / Page Up key-presses.