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

Question

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

我已经成功制作了一个 header 菜单图标，其中包含一个项目列表。但是我无法使滚动条工作。

它使用 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 上，什么也不会发生。我尝试将滚动条设置为始终可见，但仍然没有任何反应。然后我进入 HTML 本身，在 chrome 检查器中，手动将滚动条和导轨设置为可见。这对提高可见性很有用，因为它们在视觉上完全符合我的预期，但它们仍然对任何鼠标操作没有反应。

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

我试图在 fiddle 中重现我的问题，但我无法在那里上传 slimscroll-library。

有人知道这个错误是怎么回事吗？或者有什么策略可以弄清楚问题到底是什么？

Answer 1

原来，我手动复制了一个<div class="slimScrollDiv">，一个应该从插件生成的包装div，用于滚动窗格。一旦我删除了 div，slimScroll 就完美地工作了......

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

Slimscroll is not reacting on mouseover (or anything at all)

javascript

jquery

html

slimscroll