ScrollTop在DIV中无法正常工作，并带有以下溢出：隐藏

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!

Answer 1

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);
     }
}