Add scroll to div

Add scroll to div

I am trying to add a scroll event and drag event to a container.  I added the scroll event to the window but cannot specify the container.  I am looking to create an image sequence and cycle thru the images on scroll and on drag. 

  2. <div id="container">
  3. <img src="frames/noindex_basset_02_img000.jpg" class="animated">
  4. <img src="frames/noindex_basset_02_img001.jpg" class="animated">
  5. <img src="frames/noindex_basset_02_img002.jpg" class="animated">
I have 61 images in the container, just posted to code to the first 3 
  2. $(document).ready(function () {
  3.     var pictureCount = $('#container img').length;
  4.     var scrollResolution = 50;

  6.     animateImage();

  8.     function animateImage() {
  9.         var currentScrollPosition = window.pageYOffset;
  10.         var imageIndex = Math.round(currentScrollPosition / scrollResolution);

  12.         if (imageIndex >= pictureCount) {
  13.             imageIndex = pictureCount - 1; // Select last image
  14.         }

  16.         $("#container img").hide();
  17.         $("#container img").eq(imageIndex).show();
  18.     }

  20.     $("#container").click(function(){
  21.         animateImage();
  22.     });

  24.     $(window).on('scroll', function() {
  25.         animateImage();
  26.     });
  27. });