Question

我正在实施一个评论框并使用perfect-scrollbar插件来实现滚动功能。每当我加载使用angular构建的页面时，我都会在注释框内部填充虚拟注释文本。在同一个控制器中，我设置了一个500毫秒的$timeout并调用一个初始化注释框滚动条的函数。滚动功能有效，但不正确。滚动条不可见，注释框滚动到其内容高度的两倍，以便我到达注释的末尾，并且仍有空白空间可供滚动。

我试图在jsfiddle中重现问题，但一切都完美无瑕。这是我的fiddle。这是我的应用程序的头部

    <head>



            <script src="scripts/angular.min.js" type="application/javascript"></script>



            <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.3/css/perfect-scrollbar.min.css" type="text/css"></link>


            <script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.3/js/min/perfect-scrollbar.min.js">
</script>

             <link href="appDetails.css" type="text/css" rel="stylesheet"></link>


            <script src="appDetails.js" type="application/javascript" ></script>



        </head>

我执行调用以初始化滚动条的javascript文件看起来与小提琴完全相同。

如果您想在浏览器中运行测试或检查正在运行的确切代码，请访问google drive上的副本的html file链接。

Answer 1

perfect-scrollbar CSS没有被您的文件正确包含，因此Y滚动条卡在内容的底部，而不是像它应该的那样position: absolute。它适用于小提琴，因为CSS已被明确添加为外部资源。

您需要将rel="stylesheet"添加到<link>代码中，以便浏览器将其解释为样式。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.3/css/perfect-scrollbar.min.css">

Scrollbar插件在jsfiddle中工作但在实际应用程序中出现故障

1 个答案: