滚动条插件在 jsfiddle 中工作，但在实际应用程序中出现故障

Question

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

我试图在 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 文件，我在其中执行初始化滚动条的调用看起来与 fiddle.

完全一样

如果您想运行在您的浏览器中进行测试或检查运行的确切代码，请将 html file link 复制到 google 开车.

Answer 1

perfect-scrollbar CSS 未正确包含在您的文件中，因此 Y 滚动条卡在内容的底部而不是 position: absolute 应该的样子.它在 fiddle 中工作，因为 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">

滚动条插件在 jsfiddle 中工作，但在实际应用程序中出现故障

Scrollbar plugin works in jsfiddle but malfunctions within actual application

html

css

angularjs

perfect-scrollbar