CODEWITHSUNDEEP
jqueryscrolljquery-pluginsmcustomscrollbar
linopolus
linopolus

Reputation: 93

jQuery Custom Content Scroller doesn't scroll to bottom

I use mCustomScrollbar for an element on a page, which gets reloaded at times. It's a messages view, and when the user clicks on another conversation, the messages of this conversation get loaded. However, when I want to scroll to bottom after loading this, as the newest messages are at bottom, it scrolls not to bottom but a few pixels above bottom ("a few" can be randomly between 10 and 200px).

Below is a simplified example:

// 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: just a few margins and paddings and colors and stuff, nothing fancy

Upvotes: 3

Views: 17178

Answers (4)

mikeopoku
mikeopoku

Reputation: 11

Try adding padding to the bottom of the container you invoke the custom scrollbar on.

.main_list.messages  
{ 
  padding-bottom: 10px;   
}

Upvotes: 0

vlemos
vlemos

Reputation: 1

I used:

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

to start at the bottom of a DIV.

Upvotes: 0

Lau
Lau

Reputation: 282

I had the same problem , solved it by first calling the update and then adding a timeout of 1000 before I call the scrollTo bottom

$('#commentArea .mCSB_container ').append('<span class="oneComment">'+outputText+'</span><span class="commentBreaker"></span>');
$("#commentArea").mCustomScrollbar("update");
    setTimeout(function(){
        $("#commentArea").mCustomScrollbar("scrollTo","bottom");
    },1000);

Upvotes: 9

malihu
malihu

Reputation: 786

It seems that you initialize the plugin each time new content is loaded via ajax. You should initialize the plugin once (outside of the click event): 

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

When ajax call completes and the new content is fully loaded, call mCustomScrollbar update method (updates the scrollbar according to the new content) and then scroll-to bottom: 

$(".main_list.messages").mCustomScrollbar("update");
$(".main_list.messages").mCustomScrollbar("scrollTo", "bottom");

Upvotes: 4

Related Questions