ScrollTop는 오버 플로우와 DIV 내에서 작동하지 않습니다 숨겨진

Question

나는 DIV는 숨겨진 오버 플로우와 함께, 그 DIV의 전체 CSS 블록은 다음과 같습니다있다 : 다음

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

, 내가의 내용을 만들고 싶어 DIV는 요소 위로 마우스를 가져갈 때마다 스크롤됩니다. 그러나 작동하지 않습니다. jQuery.scrollTop()을 시도해 보았습니다. 또한 일반적인 scrollTop을 업데이트하면 작동하지 않습니다. 또한 Smooth Scroll 및 Autoscroll 플러그인을 사용해 보았지만 어느 것도 작동하지는 않습니다. 나의 현재 자바 스크립트는 다음과 같습니다 : 나는 또한 시도했다

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

:

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

그러나 아무것도 작동하지 않을 것입니다. 가급적이면 autoScroll 기능을 작동시키고 싶습니다. 그러나 작동 할 플러그인이 있으면 사용해보십시오.

의견을 보내 주시면 감사하겠습니다. 감사!

Answer 1

scrollTop이 작동하지 않을 수 있지만 해결 방법이 있습니다. 다른 사람이 미래에 비슷한 문제에 직면하는 경우 여기에 코드가있다 :

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