ScrollTop does not work within DIV with overflow:hidden

Question

I have a DIV, with hidden overflow, the whole CSS block for that DIV looks like this:

.mainContainer .display_box .container .row .col_4 .dPost_box{
    position:relative;
    height:100%;
    width: 100%;
    overflow:hidden;
}

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 Smooth Scroll, and Autoscroll plugins but none of them would work either. My current Javascript looks like this:

 function autoScroll(div){
     setInterval(function() { 
    if (div.scrollTop() < div[0].scrollHeight - div.height()){
        div.scrollTop(div.scrollTop() + 10);
    }}, 1000);
 }
 $(document).on({mouseenter: function(){
     autoScroll($(this));
 }, mouseleave: function(){        
 }}, '.dPosts_post');

I've also tried:

function autoScroll(div){
     setInterval(function() { 
    if (div.scrollTop() < div[0].scrollHeight - div.height()){
        div.scrollTop[0] +=10;
    }}, 1000);
 }

But nothing would work. Preferably, I want to make the autoScroll function to work, but if there are any plugins that would work, I'd be more than happy to try them out.

Any thoughts would be appreciated. Thanks!

possible duplicate of [How to scroll within an overflow hidden div to a certain currently invisible element?](http://stackoverflow.com/questions/11301841/how-to-scroll-within-an-overflow-hidden-div-to-a-certain-currently-invisible-ele) — Asad Saeeduddin, Feb 26 '13 at 22:26

score 1 · Accepted Answer · answered Feb 27 '13 at 00:42

I couldn't get scrollTop working, but I came of with a workaround. Here's the code, if somebody else faces similar problem in the future:

funnction autoScroll(div){
     //check whether the content does not fit inside the div
     if(div[0].scrollHeight>div.height()){

        //calculate how much the div needs to be scrolled
        var distance = div[0].scrollHeight - div.height() + 20;
        var topCoord = parseInt(div.css('top')); //inital top coordinate of the div
        var lineHeight = Math.floor(parseInt(div.css('font-size')) * 1.5);

        //calculate approximately how many lines there are in the distance that needs scrolling
        var linesCt = distance/lineHeight; 

        //scroll the div at a pace of 2.5s per line
        div.animate({top: topCoord - distance + 'px'}, 2500 * linesCt);
     }
}

ScrollTop does not work within DIV with overflow:hidden

1 Answers1