2

時々リロードされるページの要素に mCustomScrollbar を使用します。これはメッセージ ビューであり、ユーザーが別の会話をクリックすると、この会話のメッセージが読み込まれます。ただし、これをロードした後に下にスクロールしたい場合、最新のメッセージが下にあるため、下にスクロールするのではなく、下に数ピクセル上にスクロールします(「いくつか」は10〜200pxの間でランダムにできます)。

以下は簡単な例です。

// code to load another conversation
$(".conversations .conversation").click(function (e) {
    var $this = $(this);
    $.ajax({
        url: W.sprintf('/messages/%s/fetch', $this.attr("data-cid")),
        dataType: 'html'
    }).done(function(data) {
        $('.main_pane.messages').html(data);
        // a function call to set the hight of .main_list.messages goes here
        $(".main_list.messages").mCustomScrollbar(W.scroll_prefs);
        $(".main_list.messages").mCustomScrollbar("scrollTo", "bottom");
        // also tried adding an element at bottom and scrolling to this
        // and scrollTo Number.MAX_VALUE
        // also tried putting the two mCustomScrollbar lines both into
        // setTimeout()
    });
});

<!-- this is what gets loaded -->
#conversation
  .head
    -# some foo
  .conv_body
    .main_list.messages.custom-scroll.hide-scrollbar.start-bottom
      -# basically a bunch of these below
      .listelem.msg
        .left
          = image_tag(user.avatar.image(:icon), size: avatar_size(:icon))
        .right
          %span.datetime= fmt_time(msg[:datetime], :time)
        .middle
          .name= link_to(user.login, user)
          .text= msg[:text]
    #new_message_container.main_input.open.threeline
      = form_for(@message) do |f|
        -# ...

CSS: わずかな余白とパディングと色とその他のもので、派手なものは何もありません

4

4 に答える 4

8

私は同じ問題を抱えていましたが、最初に更新を呼び出してから、scrollTo bottom を呼び出す前に 1000 のタイムアウトを追加することで解決しました

$('#commentArea .mCSB_container ').append('<span class="oneComment">'+outputText+'</span><span class="commentBreaker"></span>');
$("#commentArea").mCustomScrollbar("update");
    setTimeout(function(){
        $("#commentArea").mCustomScrollbar("scrollTo","bottom");
    },1000);
于 2014-01-08T14:24:15.410 に答える
4

新しいコンテンツが ajax 経由で読み込まれるたびに、プラグインを初期化するようです。プラグインを一度初期化する必要があります (クリック イベントの外で):

$(".main_list.messages").mCustomScrollbar(W.scroll_prefs);

ajax 呼び出しが完了し、新しいコンテンツが完全にロードされたら、mCustomScrollbar updateメソッドを呼び出し (新しいコンテンツに従ってスクロールバーを更新します)、最後にスクロールします。

$(".main_list.messages").mCustomScrollbar("update");
$(".main_list.messages").mCustomScrollbar("scrollTo", "bottom");
于 2013-05-24T10:31:24.443 に答える
0

私が使用した：

var d = $('#selector');
d.mCustomScrollbar({
    setTop: d.height() + "px"
});

DIV の一番下から開始します。

于 2017-01-01T04:27:10.883 に答える