How to make niceScroll and bootstrap 3 dropdown-menu friends?

Question

JavaScript

I'm working on a layout where there should be a notification menu on the right side of the site. That is, when the user clicks on the notification icon, a window opens where these notifications actually exist.
However, there may be a situation where there can be a lot of these notifications and I decided to make them scroll.
Using a regular overflow is somehow not very good for the design, so I chose the jquery scroller
areaaperta.com/nicescroll

The site also uses bootstrap 3.

So my code is:

<li class="dropdown" id="menuNotice">
                        <a class="dropdown-toggle" href="#" data-toggle="dropdown"><span>&nbsp;</span></a>
                        <div class="dropdown-menu">
                            <div class="scroll-block" style="max-height: 300px;">
                                <?=frontend\modules\notification\widgets\NotificationsList::widget()?>
                            </div>
                        </div>
                    </li>

Actually, a very interesting situation is obtained here, since the scroller either does not work or works after selecting the text with the mouse and going down. Only then does the scroller appear.

I tested this whole thing a lot, and came across one point, the fact is that the open class (the class that actually opens the window) organizes javascript and, perhaps for some reason, the scroller does not want to work after that.

Please tell me what to do to make friends is the whole thing?

Answer 1

The problem was solved by changing the plugin.