Jquery Custom ScrollBar（Malihu - mCustomScrollBar）不起作用

Question

我试图为左边栏定位滚动条，但滚动条不起作用。谁可以向我解释为什么不起作用？我试图“强制”内部的位置，但没有出现任何东西。

看的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>

Answer 1

有一堆与你的jsfiddle问题。

首先，你通过HTTP加载了jquery库，jsFiddle不允许这样做。

其次，您附加mCustomScrollbar的方式有些无效。试试这个：

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

然后给你div.content一些有限的高度，所以你可以看到滚动条的工作。

看到更新后的提琴：https://jsfiddle.net/1tpaeb4b/4/