Search code examples
javascripthtmlcssmcustomscrollbar

Jquery Custom ScrollBar ( Malihu - mCustomScrollBar ) doesn't work

I tried to implement a custom scrollbar for a left sidebar with fixed position, but the scrollbar doesn't work. Who can explain to me why doesn't work? I tried to "force" inside position but doesn't appear nothing.

look at jsfiddle:

https://jsfiddle.net/1tpaeb4b/3/

    (function($){
        $(window).load(function(){
            $(".content").mCustomScrollbar(
            {
                alwaysShowScrollbar: 2,
                axis: "y",
                scrollbarPosition: "inside"
            });
        });
    })(jQuery);
#sidebar-left-container{
    position: fixed;
    height: auto;
    width: 25%;
    min-width:250px;
    bottom: 0;
    top:0;
    left: 0;
    background-color: #fff;
    color: #808080;
    padding: 15px;
}

#sidebar-left-container h2{
    margin-top: 0;
    font-size: 1.4em;
}

.truncate{
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body{
  background-color: #f1f1f1;
}
  <div id="sidebar-left-container">          
   <h2><strong><span class="fa fa-comments-o"></span> Conversations</strong></h2>
     <div class="content">
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
    <div class="media messages">
        <div class="media-left">
            <a href=""><img src="/img/avatar-small.png" alt="avatar" class="img-circle pull-left message-img margin-right-15px" /></a>
        </div>
        <div class="media-body position-relative">
            <a href=""><h4 class="media-heading"><strong>Alessandro Corradini</strong></h4></a>
            <p class="message-text truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est elit, vulputate vitae dignissim non, varius vitae purus. Praesent quis augue malesuada, malesuada est eu, cursus metus.</p>
        </div>
    </div>
</div>
</div>

Solution

  • There are a bunch of problems with your jsFiddle.

    First off, you loaded jquery library over HTTP and jsFiddle doesn't allow that.

    Secondly, the way you attach the mCustomScrollbar is somewhat invalid. Try this:

    jQuery(function($) {
  $(".content").mCustomScrollbar({
    alwaysShowScrollbar: 2,
    axis: "y",
    scrollbarPosition: "inside"
  })
});

    Then give your div.content some limited height, so you can see the scrollbar working.

    See your updated fiddle: https://jsfiddle.net/1tpaeb4b/4/