Nano Scroller在引导程序DropDown和Model Box中不起作用

Nano Scroller is not working in bootstrap DropDown and Model Box

本文关键字：Model Box 不起作用 DropDown Scroller 引导程序 Nano 更新时间：2023-09-26

我正在尝试创建一个类似于facebook的消息和通知系统，下拉菜单中有nano滑块（nanoScroller.js）。但是，内容正在滚动，但滑块不可见。

这是我的html代码：

<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <i class="fa fa-envelope-o"></i>
    <span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
    <li class="header">You have 4 messages</li>
    <li>
        <div class="nano-message nano">
            <ul class="menu nano-content" >
                <li><!-- start message -->
                    <a href="#">
                        <div class="pull-left">
                            <img src="http://hr.youngminds.com.np/assets/img/avatar5.png" class="img-circle"
                                 alt="User Image">
                        </div>
                        <h4>
                            Support Team
                            <small><i class="fa fa-clock-o"></i> 5 mins</small>
                        </h4>
                        <p>Well done ...</p>
                    </a>
                </li>
                <!-- end message -->
                <li>
                    <a href="#">
                        <div class="pull-left">
                            <img src="http://hr.youngminds.com.np/assets/img/avatar5.png" class="img-circle"
                                 alt="User Image">
                        </div>
                        <h4>
                            Prakash Bhandari
                            <small><i class="fa fa-clock-o"></i> 2 hours</small>
                        </h4>
                        <p>I am happy with .....</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pull-left">
                            <img src="http://hr.youngminds.com.np/assets/img/avatar5.png" class="img-circle"
                                 alt="User Image">
                        </div>
                        <h4>
                            Developers
                            <small><i class="fa fa-clock-o"></i> Today</small>
                        </h4>
                        <p>We are happy with our task...</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pull-left">
                            <img src="http://hr.youngminds.com.np/assets/img/avatar5.png" class="img-circle"
                                 alt="User Image">
                        </div>
                        <h4>
                            Sales Department
                            <small><i class="fa fa-clock-o"></i> Yesterday</small>
                        </h4>
                        <p>Our salses ...</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pull-left">
                            <img src="http://hr.youngminds.com.np/assets/img/avatar5.png" class="img-circle"
                                 alt="User Image">
                        </div>
                        <h4>
                            Management
                            <small><i class="fa fa-clock-o"></i> 2 days</small>
                        </h4>
                        <p>We are management ...</p>
                    </a>
                </li>
            </ul>
        </div>
    </li>
    <li class="footer">
        <a href="#">See All Messages</a>
    </li>
</ul>

这是我的javascript代码：$(".nano-message").nanoScroller();

有什么错误或其他方法可以解决这个问题吗？

我确信HTML和JS代码中没有错误。我很久以前也遇到过同样的问题，但我已经通过以下方式解决了。

$(".messages-menu").click(function(){
    setTimeout(function () {
        $(".nano-message").nanoScroller();
    }, 100)
});