javascript – Slimscroll没有对鼠标悬停做出反应(或任何事情)

我正在尝试实现一个包含通知的下拉菜单,就像这个页面有: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.

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

最佳答案
事实证明,我手动复制了一个< div class =“slimScrollDiv”&gt ;,一个应该从插件生成的包装div,用于滚动窗格.一旦我删除了那个div,slimScroll就完美了......

转载注明原文:javascript – Slimscroll没有对鼠标悬停做出反应(或任何事情) - 代码日志