title: ScrollTop does not work within DIV with overflow:hidden
body: <p>I have a DIV, with hidden overflow, the whole CSS block for that DIV looks like this:</p>
  
  <pre><code>.mainContainer .display_box .container .row .col_4 .dPost_box{
      position:relative;
      height:100%;
      width: 100%;
      overflow:hidden;
  }
  </code></pre>
  
  <p>Then, I want to make the content of the DIV scroll every time I hover onto the element. However, it won't work. I have tried jQuery.scrollTop(), as well as updating regular scrollTop, it wouldn't work. I also tried using <a href="https://github.com/kswedberg/jquery-smooth-scroll" rel="nofollow">Smooth Scroll</a>, and <a href="http://code.google.com/p/jquery-autoscroll/" rel="nofollow">Autoscroll</a>
  plugins but none of them would work either.
  My current Javascript looks like this:</p>
  
  <pre><code> function autoScroll(div){
       setInterval(function() { 
      if (div.scrollTop() &lt; div[0].scrollHeight - div.height()){
          div.scrollTop(div.scrollTop() + 10);
      }}, 1000);
   }
   $(document).on({mouseenter: function(){
       autoScroll($(this));
   }, mouseleave: function(){        
   }}, '.dPosts_post');
  </code></pre>
  
  <p>I've also tried:</p>
  
  <pre><code>function autoScroll(div){
       setInterval(function() { 
      if (div.scrollTop() &lt; div[0].scrollHeight - div.height()){
          div.scrollTop[0] +=10;
      }}, 1000);
   }
  </code></pre>
  
  <p>But nothing would work. 
  Preferably, I want to make the <code>autoScroll</code> function to work, but if there are any plugins that would work, I'd be more than happy to try them out.</p>
  
  <p>Any thoughts would be appreciated. Thanks!</p>