在引导下拉菜单中使用滚动答案

【问题标题】：Using a scroll in a bootstrap dropdown在引导下拉菜单中使用滚动
【发布时间】：2017-04-12 00:42:49
【问题描述】：

我正在尝试向引导下拉菜单添加滚动条。这是一个垂直滚动，代码如下所示。首先，我有一个有效的下拉菜单，但是当我像第二个下拉菜单一样添加滚动时，一切都崩溃了。如何以正确的方式正确地将滚动添加到下拉列表。我想在我的示例中使用该插件。

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.concat.min.js"></script>
<link href="https://raw.githubusercontent.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.css" rel="stylesheet"/>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown works <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 4</a></li>
    <li><a href="#">Menu item 5</a></li>
    <li><a href="#">Menu item 6</a></li>
    <li><a href="#">Menu item 7</a></li>
    <li><a href="#">Menu item 8</a></li>
    <li><a href="#">Menu item 9</a></li>
    <li><a href="#">Menu item 10</a></li>
  </ul>
</div>

<br>

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown do not work <span class="caret"></span></button>
  <ul id="myscrollid" class="dropdown-menu mCustomScrollbar" data-mcs-theme="dark">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 4</a></li>
    <li><a href="#">Menu item 5</a></li>
    <li><a href="#">Menu item 6</a></li>
    <li><a href="#">Menu item 7</a></li>
    <li><a href="#">Menu item 8</a></li>
    <li><a href="#">Menu item 9</a></li>
    <li><a href="#">Menu item 10</a></li>
  </ul>
</div>

<script>
$("#myscrollid").mCustomScrollbar({
    setHeight:"100px",
    scrollbarPosition: "inside",
});
</script>

</body>
</html>

【问题讨论】：

您在寻找这样的东西吗？ stackoverflow.com/a/19229738/171456
是的，我希望结果看起来像这样，但使用这个插件。 manos.malihu.gr/jquery-custom-content-scroller

标签： javascript jquery twitter-bootstrap-3 scroll

【解决方案1】：

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="/PATH/TO/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/PATH/TO/jquery.mCustomScrollbar.concat.min.js"></script>

</head>
<body>

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown works <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 4</a></li>
    <li><a href="#">Menu item 5</a></li>
    <li><a href="#">Menu item 6</a></li>
    <li><a href="#">Menu item 7</a></li>
    <li><a href="#">Menu item 8</a></li>
    <li><a href="#">Menu item 9</a></li>
    <li><a href="#">Menu item 10</a></li>
  </ul>
</div>

<br>

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown do not work <span class="caret"></span></button>
  <ul id="myscrollid" class="dropdown-menu mCustomScrollbar" data-mcs-theme="dark">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 4</a></li>
    <li><a href="#">Menu item 5</a></li>
    <li><a href="#">Menu item 6</a></li>
    <li><a href="#">Menu item 7</a></li>
    <li><a href="#">Menu item 8</a></li>
    <li><a href="#">Menu item 9</a></li>
    <li><a href="#">Menu item 10</a></li>
  </ul>
</div>

<script>
  $(document).ready(function() {
    $("#myscrollid").mCustomScrollbar({
      setHeight:"100px",
      scrollbarPosition: "inside",
    });
  });
</script>
</body>
</html>

下载源代码并指定插件的路径。您应该调用 jQuery，如图所示。这对我有用。

希望对你有帮助

【讨论】：

我无法让您的代码正常工作。可以举个例子吗？