Scroll Event in a particular DIV with jquery

Question

What I am looking for is an event which fires when a scroll via keyboard takes place on a specific div. I have surfed and tried to implement several code snippets and plugin to achieve that but it did not help me. I have already implemented the same when I scroll within a particular div via mouse using mousewheel event and scrollTop function.

What I want is when a user scrolls in a particular div , the user should be navigated to another div / section.

The first screen with image is in a div on which i have implemented scrollTop on mousewheel. I want to implement the same functionality with scroll event via keyboard

You can see the live site http://www.eccentricengine.com/Demo/eccentric/ and view the source of what examples i have tried to implement.There is also possibility of conflicts in JS.

Answer 1

see a small demo it may help you.click inside the div and press down or up key from key board.

 $("span").hide(); $(".box").scroll(function() { $("span").css( "display", "inline" ).fadeOut( "slow" ); }); 

 div.box{ width: 200px; height: 150px; overflow: scroll; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> text here<br> text here<br> text here<br> text here<br> text here<br> text here<br> text here<br> text here <br> text here<br> text here<br> text here<br> text here<br> text here<br> text here<br> text here<br> text here<br> text here<br> text here </div> <span>Scrolling</span> 

Answer 2

Maybe I got you wrong, but you can just register an event-listener for the scroll event. So you don't need different events for keyboard, mouse, etc...

Here is a simple snippet:

 document.querySelector('.container').addEventListener('scroll', function() { console.log('scroll event fires'); }); 

 .container { height: 100px; overflow-y: auto; border: 1px solid #f00; } .content { height: 1000px; background-color: #6Df; } 

 <div class="container"> <div class="content"> Scroll me </div> </div> 

Answer 3

谢谢大家的帮助。.我使用0,1的标志解决了我的问题。.根据光标所在的div设置标志。