javascript - 如果有一个使用 javascript 或 jquery 的长菜单,如何自动将滚动条添加到侧边栏菜单

标签 javascript jquery html css

如果侧边栏菜单很长,任何人都可以帮助我如何自动添加滚动条。因为我正在尝试自动为侧边栏菜单添加滚动条但无法解决。在此先感谢。这是我的 html 代码。

HTML:

<div id="menuwrapper" >
                    <ul class="MainMenu">                           
                       <li>
                            <a href="#"><strong style="margin-left:7px;">Current Openings</strong></a>                              
                        </li>
                        <li style="height: 27px;">
                            <a href="#"><strong style="margin-left:7px;">Travel Request</strong></a>
                        </li>
                        <li><a href="#"><strong style="margin-left:7px;">Timesheet Management</strong></a>
                        </li>
                        <li><a href="#"><strong style="margin-left:7px;">Leave Management</strong></a>
                        </li>
                        <li><a href="#"><strong style="margin-left:7px;">Remuneration</strong></a>
                        </li>
                        <li>
                            <a href="#"><strong style="margin-left:7px;">My Assets</strong></a>
                        </li>
                        </ul>
                        <div id="datepicker"></div>
                        </div>

最佳答案

我试过但只用了css

.MainMenu {
 width:200px;
 max-height: 200px;
 background-color:#fff;
 border:1px solid #ccc;
 overflow-x:hidden;
 overflow-y:hidden;
 transition: .5s ease;
}
.MainMenu li a {
  display: block;
  padding-bottom: 10px;
  margin: 10px 0;
  text-decoration: none;
  color: #777;
  border-bottom: 1px solid #f5f5f5;
  overflow: hidden;
}

演示 https://jsfiddle.net/28xwut9m/

或者你可以使用像jQuery slimScroll这样的插件

我有更新演示使用 jQuery-slimScroll check here

关于javascript - 如果有一个使用 javascript 或 jquery 的长菜单,如何自动将滚动条添加到侧边栏菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38607154/

相关文章:

jquery - 如何使用隐藏字段通过 ID/值对使用 jquery 自动完成

数组对象中的javascript数组对象

html - 不同属性的 CSS3 不同自定义缓动

javascript - HTML 到呈现的 html

javascript - 无法在 Vue Web 应用程序中播放音频文件

javascript - 解析jquery中的字符串数组

javascript - 使用 facebook 登录让 typescript 为 Angular 2 项目工作

javascript - MVC3 AJAX 将数据传递到 Controller 。已提交两次

javascript - 检查日期是否在两个日期之间

PHP 只打印一行