Slimscroll对鼠标悬停(或任何东西)没有反应

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

本文关键字：有反应 任何东 鼠标 悬停 Slimscroll      更新时间：2023-09-26

我正在尝试实现一个包含通知的下拉菜单，就像这个页面有: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上，什么也不会发生。我尝试将滚动条设置为始终可见，但仍然没有发生任何事情。然后我进入HTML本身，在chrome检查器中，手动设置滚动条和轨道是可见的。这对于可见性来说是有效的，因为它们在视觉上看起来完全符合我的期望，但它们仍然没有对任何鼠标动作做出反应。

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

我试图在一个fiddle中重新创建我的问题，但我无法在那里上传sliscroll库。

有谁知道这个错误是关于什么的吗?或者有什么策略可以找出问题到底是什么?

原来，我手动复制了一个<div class="slimScrollDiv">，一个应该从插件生成的包装div，用于滚动窗格。一旦我删除了这个div, sliscroll就可以正常工作了

相关文章：