【发布时间】:2015-10-23 08:00:12
【问题描述】:
我正在尝试实现一个包含通知的下拉菜单,例如此页面: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。
有谁知道这个错误可能是什么?或者有什么策略可以找出问题的实质是什么?
【问题讨论】:
标签: javascript jquery html slimscroll