CODEWITHSUNDEEP
javascripthtmlcssmcustomscrollbar
Alessandro Corradini
Alessandro Corradini

Reputation: 499

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>

Upvotes: 0

Views: 518

Answers (1)

Victor Levin
Victor Levin

Reputation: 1177

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/

Upvotes: 1

Related Questions