1

基本的に、以下の CSS コードを使用して、スクロール可能な DIV を持つある種のAutologを作成しました。

.myClass {
position: relative;
padding: 39px 14px 14px;
margin-bottom: -1px;
border: 1px solid #ddd;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 200px;
overflow: auto;
}

基本的に、データは、外部ソースからフェッチされる以下に示すように、JQuery を使用して動的にこの div 内に配置されます。

$.each(data.search, function (i, v) {
        $('.myClass').append('my content here');
});

divはこのようにシンプルに見えます

<div class="myClass">

</div>

私がdivにやりたいことは、コンテンツが増えてきているので、手動でバーを下までスクロールし続けるのではなくoverflow、横のスクロールバーを自動的に下までスクロールしてAutoLogを追跡することです。 Javascriptを介して達成できますが、方法がわからない場合、誰かが私を正しい方向に向けることができれば、それは素晴らしいことです.

4

3 に答える 3

2

私は最近、私が印刷していた「コンソール」（div）を持っていて、それがオーバーフローしたときにそれをたどった、似たようなことをしました。これが私の「println」関数でした：

printLn: function(str, clss) {
    con.print(str, clss);
    $output.append('<br/>').animate({ scrollTop: $output.prop('scrollHeight') }, 1);
},

scrollTop基本的に新しいに更新しscrollHeightます。これは、多かれ少なかれ「スクロールの高さが許す限りスクロールする」と言うので、一番下に「固執」します。

編集

あなたの状況では、次のようなことをしています：

$.each(data.search, function (i, v) {
        $div = $('.myClass');
        $div.append('my content here').animate({ scrollTop: $div.prop('scrollHeight') }, 1);
});

これscrollTopにより、div のプロパティが最大に設定されるため、一番下までスクロールします。

于 2013-03-13T18:21:17.923 に答える
0 
// Get the number of pixels scrolled
var  intElemScrollTop = element.scrollTop;
intElemScrollTop is an integer corresponding to number of pixels that element's content has been scrolled upward.

// Set the number of pixels scrolled
element.scrollTop = intValue;

リンクを確認してくださいhttps://developer.mozilla.org/en-US/docs/DOM/element.scrollTop

于 2013-03-13T18:21:01.180 に答える
0

コンテンツを追加した後にこれをスクリプトに追加すると、動作するはずです..

$(".myClass").animate({
    scrollTop: $(".myClass").scrollHeight
}, 300);
于 2013-03-13T18:20:00.073 に答える