如何使长 Bootstrap 下拉菜单垂直滚动？答案

【问题标题】：How to make long Bootstrap dropdown menus vertically scrollable?如何使长 Bootstrap 下拉菜单垂直滚动？
【发布时间】：2018-09-26 09:16:02
【问题描述】：

我得到了以下响应式网站，可以在所有设备上按照我想要的方式工作。剩下的唯一问题是使下拉菜单可滚动，这样当下拉菜单中的选项数量超过设备屏幕的容量时，就有办法滚动它。 p>

这些下拉菜单用于在此示例的开发过程中滚动 (http://tanguay.info/testmenu2)。但是由于我需要添加固定高度等来获得这种设计，所以它有很多这些下拉菜单不可滚动。 如何在保留网站当前功能的同时恢复这种可滚动功能，即保留原位的页脚？

这是它在智能手机和计算机视图中的外观：

智能手机：

计算机：

您可以在此处查看此测试站点：http://tanguay.info/testmenu

您可以在这里下载代码：http://tanguay.info/testmenu/testmenu.zip

这里是 HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">       
        <link rel="stylesheet" type="text/css" href="index_fichiers/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="index_fichiers/bootstrap_custom_extensions.css">
        <link rel="stylesheet" type="text/css" href="index_fichiers/bootstrap_override.css">
        <link rel="stylesheet" type="text/css" href="index_fichiers/system_navbarResponsiveSite.css">
        <link rel="stylesheet" type="text/css" href="index_fichiers/system_reset.css">
        <link rel="stylesheet" type="text/css" href="index_fichiers/system_developer.css">
        <link rel="stylesheet" type="text/css" href="index_fichiers/system_main.css">
        <link rel="stylesheet" type="text/css" href="index_fichiers/custom_main.css">
        <link rel="stylesheet" type="text/css" href="index_fichiers/font-awesome.css">
        <link rel="stylesheet" type="text/css" href="index_fichiers/lt.css">
        <script src="index_fichiers/jquery-2.js"></script>
        <script src="index_fichiers/bootstrap.js"></script>
        <script src="index_fichiers/qtools.js"></script>
        <script src="index_fichiers/system_main.js"></script>
        <script src="index_fichiers/angular.js"></script>
        <style type="text/css">
            /*  page-level CSS */
        </style>
    </head>
    <body>
        <div class="container">
            <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container-fluid">                    
                    <div class="navbar-header pull-left">
                        <div class="navHeaderArea">
                            <div class="theUser" onclick="location.href = '?';">The Test Site</div>
                            <div class="clear"></div>                
                        </div>
                    </div>    
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown pull-right active">
                            <a href="#" data-toggle="dropdown" class="dropdown-toggle">MENU</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Test Page #1</a></li>
                                <li><a href="#">Test Page #2</a></li>
                                <li><a href="#">Test Page #3</a></li>
                                <li><a href="#">Test Page #4</a></li>
                                <li><a href="#">Test Page #5</a></li>
                                <li><a href="#">Test Page #6</a></li>
                                <li><a href="#">Test Page #7</a></li>
                                <li><a href="#">Test Page #8</a></li>
                                <li><a href="#">Test Page #9</a></li>
                                <li><a href="#">Test Page #10</a></li>
                                <li><a href="#">Test Page #11</a></li>
                                <li><a href="#">Test Page #12</a></li>
                                <li><a href="#">Test Page #13</a></li>
                                <li><a href="#">Test Page #14</a></li>
                                <li><a href="#">Test Page #15</a></li>
                                <li><a href="#">Test Page #16</a></li>
                                <li><a href="#">Test Page #17</a></li>
                                <li><a href="#">Test Page #18</a></li>
                                <li><a href="#">Test Page #19</a></li>
                                <li><a href="#">Test Page #20</a></li>
                            </ul>                            
                        </li>
                    </ul>                
                </div>
            </nav>
            <div class="pageContent"><div ng-app="mainModule" ng-controller="mainController" class="angular-hide-during-page-load ng-scope">
                    <h1 class="showcaseTitle">Test Page</h1>
                    <div class="showcaseDescription">This is a test page that shows how the menu extends to far past the bottom of the screen.</div>
                    <div class="panel panel-primary">
                        <div class="panel-heading ng-binding">Input Text</div>
                        <div class="panel-body">

                            <div>line #0</div><div>line #1</div><div>line #2</div><div>line #3</div><div>line #4</div><div>line #5</div><div>line #6</div><div>line #7</div><div>line #8</div><div>line #9</div><div>line #10</div><div>line #11</div><div>line #12</div><div>line #13</div><div>line #14</div><div>line #15</div><div>line #16</div><div>line #17</div><div>line #18</div><div>line #19</div><div>line #20</div><div>line #21</div><div>line #22</div><div>line #23</div><div>line #24</div><div>line #25</div><div>line #26</div><div>line #27</div><div>line #28</div><div>line #29</div><div>line #30</div><div>line #31</div><div>line #32</div><div>line #33</div><div>line #34</div><div>line #35</div><div>line #36</div><div>line #37</div><div>line #38</div><div>line #39</div><div>line #40</div><div>line #41</div><div>line #42</div><div>line #43</div><div>line #44</div><div>line #45</div><div>line #46</div><div>line #47</div><div>line #48</div><div>line #49</div><div>line #50</div><div>line #51</div><div>line #52</div><div>line #53</div><div>line #54</div><div>line #55</div><div>line #56</div><div>line #57</div><div>line #58</div><div>line #59</div><div>line #60</div><div>line #61</div><div>line #62</div><div>line #63</div><div>line #64</div><div>line #65</div><div>line #66</div><div>line #67</div><div>line #68</div><div>line #69</div><div>line #70</div><div>line #71</div><div>line #72</div><div>line #73</div><div>line #74</div><div>line #75</div><div>line #76</div><div>line #77</div><div>line #78</div><div>line #79</div><div>line #80</div><div>line #81</div><div>line #82</div><div>line #83</div><div>line #84</div><div>line #85</div><div>line #86</div><div>line #87</div><div>line #88</div><div>line #89</div><div>line #90</div><div>line #91</div><div>line #92</div><div>line #93</div><div>line #94</div><div>line #95</div><div>line #96</div><div>line #97</div><div>line #98</div><div>line #99</div><div>line #100</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pageFooter">
                <div class="page_Footer_left">The Footer</div>
                <div class="page_Footer_right">
                </div>
            </div>
        </div>
    </body>
</html>

【问题讨论】：

标签： css twitter-bootstrap-3

【解决方案1】：

您可以通过在下拉列表中指定 max-height 和 overflow-y 来做到这一点：

.dropdown-menu{
    max-height: 400px;
    overflow-y: auto;
}

您可以在 JS 中计算最大高度或使用视口单位。例如，如果您希望下拉菜单填充到页面底部的空间，您可以使用：max-height: calc(100vh - 50px)，其中 50px 是标题的高度。

请注意，在上述解决方案中，左侧的列表不会独立于下拉列表滚动。到达下拉列表的末尾后，它将继续滚动列表。为了防止这种情况，也让面板溢出：

.panel.panel-primary{
    max-height: 60vh;
    overflow-y: auto;
}

同样，如何计算最大高度取决于您的用例。

【讨论】：

谢谢，max-height: calc(100vh - 50px) 和 overflow-y:auto 在我测试过的每台设备上都能完美运行，只在该设备高度需要时显示滚动条：tanguay.info/testmenu4
此解决方案效果很好，除非您有子菜单。由于子菜单嵌套在.dropdown-menu 内，因此子菜单触发显示水平滚动条并显示在父菜单内。示例here

【解决方案2】：

当外部容器具有固定高度并且在 css 中有 overflow:scroll 或 overflow:auto 时，它将是可滚动的

所以移动设备的.dropdown-menu 应该有一个固定的高度，具体取决于屏幕高度。可以使用 css 属性视口高度来实现（这将随设备变化）max-height:80vh（根据您的要求更改此设置）。了解更多。

所以将overflow:auto 和max-height:80vh 添加到.dropdown-menu 以使其工作。

【讨论】：

【解决方案3】：

您可以通过在ul 标签中添加预滚动来解决此问题：

<ul class="dropdown-menu pre-scrollable">

【讨论】：

请注意，pre-scrollable 将始终显示滚动条（至少在 Chrome 上），这不是很好的外观

【解决方案4】：

请试试这个：

.dropdown-menu
 {
   max-height: 200px;
   overflow-y: scroll;
  }

max-height 属性限制最大高度。

【讨论】：

谢谢，这是一个不错的简单解决方案，看起来不错，并且在我的智能手机浏览器和 ipad 模拟器中具有良好的用户功能：tanguay.info/testmenu3
使用overflow-y: auto 而不是overflow-y: scroll。即使元素没有溢出，后者也会显示滚动条（Apple 设备除外，滚动条从不显示）。