2

オーバーフローが隠されている 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プラグインも使用してみ ましたが、どれも機能しませんでした。私の現在のJavascriptは次のようになります。

 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動作するプラグインがあれば喜んで試してみたいと思います。

任意の考えをいただければ幸いです。ありがとう！

4

1 に答える 1

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);
     }
}
于 2013-02-27T00:42:18.297 に答える