風格滾動在引導下拉菜單不起作用

Question

我在引導中使用下拉和內容很高，所以我需要scrooll-y 但我不想使用瀏覽器默認滾動條，我使用→this script 此腳本工作正常，但是，當使用該腳本自舉下拉它不工作

此代碼爲我的自舉下拉菜單：

<button class="notify-bell dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"></button> 
<div class="dropdown-menu notify_container" id="notify_container" aria-labelledby="dropdownMenu2"> 
<h1>...</h1> 
<h2>...</h2> 
<div class="action"> 
    <img class="img-circle-notify" src="images/circle-avatar.png" alt="" title=""> 
    <span class="user-message-row">....</span> 
    <span class="descript-notify">....</span> 
    <div class="notify-link"> 
    <a class="" href="#">.....</a> 
    </div> 
</div> 

，這代碼初始化腳本：

<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/jquery.mousewheel.js"></script> 
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script> 
<script> 
    $(function() { 
    var bars = '.jspHorizontalBar, .jspVerticalBar'; 
    $('.dropdown-menu .notify_container').bind('jsp-initialised', function (event, isScrollable) { 

     //hide the scroll bar on first load 
     $(this).find(bars).hide(); 

    }).jScrollPane().hover(

     //hide show scrollbar 
     function() { 
      $(this).find(bars).stop().fadeTo('fast', 0.9); 
     }, 
     function() { 
      $(this).find(bars).stop().fadeTo('fast', 0); 
     } 
    ); 
    console.log($('#notify_container'));    
}); 
</script> 

你也可以看到這個代碼的jsfiddle：http://jsfiddle.net/dbneke8b/

Answer 1

沒有與您正在使用下面的腳本問題，即使是在撥弄你的問題創建

<script type="text/javascript" src="js/jquery.mousewheel.js"></script> 
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script> 

$（... ）.bind（...）。JScrollPane的是不是一個函數

而且在CSS margin-top: -600px;可能是它的錯字或您的設計要求

.notify_container{ 
    width: 325px; 
    height: 150px; 
    background-color: #f9f9f9; 
    -webkit-box-shadow: 0px 1px 5px 0px rgba(17, 16, 13, 0.33); 
    -moz-box-shadow: 0px 1px 5px 0px rgba(17, 16, 13, 0.33); 
    box-shadow:   0px 1px 5px 0px rgba(17, 16, 13, 0.33); 
    margin: 0 auto; 
    margin-top: -600px; 
    overflow: hidden; 
} 

這裏是工作示例

CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<link rel="stylesheet" href="http://www.queness.com/resources/html/osx-lion-scrollbar/style/jquery.jscrollpane.css"> 

JS

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="http://www.queness.com/resources/html/osx-lion-scrollbar/script/jquery.mousewheel.js"></script> 
<script type="text/javascript" src="http://www.queness.com/resources/html/osx-lion-scrollbar/script/jquery.jscrollpane.min.js"></script> 

附加CSS

<style> 
.notify_container{ 
    width: 325px; 
    height: 150px; 
    background-color: #f9f9f9; 
    -webkit-box-shadow: 0px 1px 5px 0px rgba(17, 16, 13, 0.33); 
    -moz-box-shadow: 0px 1px 5px 0px rgba(17, 16, 13, 0.33); 
    box-shadow:   0px 1px 5px 0px rgba(17, 16, 13, 0.33); 
    margin: 0 auto; 
    margin-top: 100px; 
    overflow: hidden; 
} 
.notify_container h1{ 
    font-family: IRANSans-web; 
    font-size: 14px; 
    text-align: center; 
    margin-top: 7px; 
    margin-bottom: 0 !important; 
} 
.notify_container h2{ 
    font-family: IRANSans-web; 
    font-size: 13px; 
    margin-right: 10px; 
    margin-top: 8px !important; 
    color: #757575; 

} 
.notify_container .action{ 
    width: 290px; 
    padding-bottom: 5px; 
    margin: 0 8px; 
    margin-bottom: 5px; 
    background-color: #fff; 
    -webkit-box-shadow: 0px 1px 2px 0px rgba(17, 16, 13, 0.33); 
    -moz-box-shadow: 0px 1px 2px 0px rgba(17, 16, 13, 0.33); 
    box-shadow:   0px 1px 2px 0px rgba(17, 16, 13, 0.33); 
} 
</style> 

腳本

<script> 
$(function(){ 
    var bars = '.jspHorizontalBar, .jspVerticalBar'; 
    $('.dropdown-menu .notify_container').bind('jsp-initialised', function (event, isScrollable) { 

     //hide the scroll bar on first load 
     $(this).find(bars).hide(); 

    }).jScrollPane().hover(

     //hide show scrollbar 
     function() { 
      $(this).find(bars).stop().fadeTo('fast', 0.9); 
     }, 
     function() { 
      $(this).find(bars).stop().fadeTo('fast', 0); 
     } 
    ); 
    console.log($('#notify_container'));    
}); 
</script> 

Working Fiddle Example