Question

我在bootstrap中使用dropdown并且内容很高，所以我需要scrooll-y 但我不想使用浏览器默认滚动条，我使用→this script 这个脚本运行良好，但是当使用带有引导程序下拉列表的脚本时，它不起作用

我的bootstrap下拉菜单的代码：

rowCallback

和初始化脚本的代码：

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

你也可以在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

在bootstrap下拉菜单中样式滚动不起作用

1 个答案: