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.
Share Improve this question edited Nov 16, 2015 at 17:13 DanTheMan asked Nov 16, 2015 at 16:09 DanTheManDanTheMan 5562 gold badges7 silver badges21 bronze badges 1- 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
Reset to default 3instead 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.