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检查器中进入HTML本身，并手动设置滚动条和轨道可见。这对于可见性起作用，因为它们在视觉上看起来与我预期的完全一样，但它们仍然没有对任何鼠标操作作出反应。

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

我试图在小提琴中重新创建我的问题，但我无法在那里上传slimscroll-library。

有谁知道这个错误可能是什么？或者找出实际问题的任何策略？

Answer 1

事实证明，我已经手动复制了<div class="slimScrollDiv">，一个应该从插件生成的包装div，用于滚动窗格。一旦我删除了div，slimScroll就完美了......

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

1 个答案: