Slimscroll对鼠标悬停没有反应（或任何反应）

Question

我正在尝试实现一个包含通知的下拉菜单，例如该页面具有：http : //infinite-woodland-5276.herokuapp.com/index.html。我正在尝试重新创建网站右上角的扩音器图标及其菜单。

我成功地制作了带有项目列表的标题菜单图标。但是我不能使滚动条工作。

它使用的是jquery插件slimScroll，可在此处找到：http ://rocha.la/jQuery-slimScroll 。

在教程中，滚动条的位置看起来非常简单直接。这是我的工作：

$(document).ready(function(){
        $('#main-navbar-notifications').slimScroll({
            height : 250
        });
    });

实施此代码后，此代码出现在我的DOM中：

<div class="slimScrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 195.925px; background: rgb(0, 0, 0);"></div>
<div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div>

正如我所期望的那样，它们没有出现在＃main-navbar-notifications中，而是随后出现。但是，我发现我要复制的示例中存在完全相同的DOM结构。好像是应该的。

但是我的滚动条根本不起作用。如果我将鼠标悬停在div上，则什么也不会发生。我尝试将滚动条设置为始终可见，但仍然没有任何反应。然后，我在chrome inspector中进入HTML本身，并手动将滚动条和导轨设置为可见。这样可以提高可见性，因为它们的外观完全符合我的预期，但是它们仍然没有对任何鼠标操作做出反应。

我能够找到的关于该主题的唯一信息是，确保将我的滚动div设置为position: relative;，但这没有做任何事情。我的控制台中没有错误消息，也没有任何消息。

我试图在小提琴中重现我的问题，但无法在此处上传slimscroll库。

有谁知道这个错误可能是什么？还是有任何找出问题根源的策略？

Answer 1

原来，我已经<div class="slimScrollDiv">为滚动窗格手动复制了一个应该由插件生成的包装div。一旦删除了该div，slimScroll便可以完美工作了。