完美的滚动条不起作用答案

【问题标题】：Perfect scrollbar not working完美的滚动条不起作用
【发布时间】：2016-08-29 15:56:05
【问题描述】：

我在以下代码中缺少什么？为什么Perfect scrollbar 会严重崩溃？

它似乎将 myDiv 滚动条与浏览器主滚动条弄乱了......感谢任何帮助。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="utf-8" />
    <link href="perfect-scrollbar.min.css" type="text/css" rel="stylesheet">
    <style>
        #myDiv {
            width: 400px;
            height: 400px;
            overflow: auto;
            background-color: #eeeeee;
            margin: auto;
        }
    </style>
</head>

<body>

<div id="myDiv">
    <p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p><p>Test perfect scrollbar</p>
</div>

<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="perfect-scrollbar.jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#myDiv').perfectScrollbar();
    });
</script>

</body>
</html>

谢谢

【问题讨论】：

您有checked your console 的错误吗？

标签： javascript jquery html scrollbar perfect-scrollbar

【解决方案1】：

将position:relative 添加到#myDiv

演示：https://jsfiddle.net/gbfLazpx/243/

CSS：

#myDiv {
  width: 400px;
  height: 400px;
  overflow: auto;
  background-color: #eeeeee;
  margin: auto;
  position: relative;
}

在这里查看第一点：https://github.com/noraesae/perfect-scrollbar#requirements

容器必须具有“位置”css 样式。

【讨论】：

是他！谢谢，我错过了那部分。