使 javascript 推送菜单可滚动（无滚动条）
我有一个从页面左侧滑出的推送菜单（从左到右），将页面向右滑动。我试图为它添加一个保护措施，如果链接超过页面高度，菜单是可滚动的。现在，它不起作用并且链接被隐藏。有人可以帮我弄清楚如何使菜单可滚动。
我试过添加scroll-y: scroll几个 css 元素，但这似乎没有任何区别。我希望滚动功能在手机上也能通过触摸滚动。
而且，我想看看如何在菜单打开时禁用“主体”上的滚动。
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
.pushmenu {
background: #444;
text-align: center;
font-family: Tahoma, Geneva, sans-serif;
width: 300px;
height: 100%;
top: 0;
z-index: 1000;
position: fixed;
}
.pushmenu h3 {
color: #f1f1f1;
font-size: 1.3em;
font-weight: 400;
padding: 15px 25px;
margin: 0;
background: #333;
height: 16px;
}
.links {
list-style-type: none;
padding: 0;
margin: 0 0 0 25%;
width: 50%;
}
.links li { margin-top: 30px; }
.links li a {
position: relative;
display: block;
color: #f1f1f1;
font-size: 1.3em;
font-weight: 400;
text-decoration: none;
padding: 14px;
}
.links li a:after {
content: '';
display: block;
position: absolute;
left: 20px;
bottom: -5px;
width: 0;
height: 4px;
background-color: #f1f1f1;
-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
transition: width 0.3s ease;
}
.links li a:hover:after { width: 70%; }
.links li a:active { color: #dbdbdb; }
.pushmenu-left { left: -300px; }
.pushmenu-left.pushmenu-open { left: 0; }
.pushmenu-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.pushmenu-push-toright { left: 300px; }
.pushmenu, .pushmenu-push {
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
transition:all 0.5s ease;
}
<body class="pushmenu-push">
<nav class="pushmenu pushmenu-left">
<ul class="links">
<li><a href="index">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Missions</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Give</a></li>
慕运维80795933回答
-
饮歌长啸
我最终找到了一种方法，通过添加一个内部容器并在两者上使用溢出，在没有滚动条的情况下做我想做的事情。.pushmenu { background: #444; text-align: center; font-family: Tahoma, Geneva, sans-serif; width: 300px; height: 100%; top: 0; z-index: 1000; position: fixed; overflow: hidden;}.pushmenu_inner{ width: 100%; height: 99%; overflow: auto; padding-right: 15px;} -
拉丁的传说
有一个名为 overflow 的 CSS 属性，它控制超出可用空间时的内容。将其设置为自动会自动添加一个滚动条。pushmenu { background: #444; text-align: center; font-family: Tahoma, Geneva, sans-serif; width: 300px; height: 100%; top: 0; z-index: 1000; position: fixed; overflow: auto;} -
倚天杖
您可以使用此代码<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>demo</title> <style type="text/css"> body { margin: 0; } .pushmenu { background: #444; text-align: center; font-family: Tahoma, Geneva, sans-serif; width: 300px; height: 100%; top: 0; z-index: 1000; position: fixed; overflow: hidden; } .main { width: 100%; height: 100%; overflow: auto; } .pushmenu h3 { color: #f1f1f1; font-size: 1.3em; font-weight: 400; padding: 15px 25px; margin: 0; background: #333; height: 16px; } .links { list-style-type: none; padding: 0; margin: 0 0 0 25%; width: 50%; } .links li { margin-top: 30px; } .links li a { position: relative; display: block; color: #f1f1f1; font-size: 1.3em; font-weight: 400; text-decoration: none; padding: 14px; } .links li a:after { content: ''; display: block; position: absolute; left: 20px; bottom: -5px; width: 0; height: 4px; background-color: #f1f1f1; -webkit-transition: width 0.3s ease; -moz-transition: width 0.3s ease; transition: width 0.3s ease; } .links li a:hover:after { width: 70%; } .links li a:active { color: #dbdbdb; } .pushmenu-left { left: -150px; } .pushmenu-left.pushmenu-open { left: 0; } .pushmenu-push { overflow-x: hidden; position: relative; left: 0; } .pushmenu-push-toright { left: 300px; } .pushmenu, .pushmenu-push { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } </style></head><body class="pushmenu-push"> <nav class="pushmenu pushmenu-left main"> <ul class="links"> <li><a href="index">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Missions</a></li> <li><a href="#">Partners</a></li> <li><a href="#">Events</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Give</a></li> <li><a href="index">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Missions</a></li> <li><a href="#">Partners</a></li> <li><a href="#">Events</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Give</a></li> </ul> </nav> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script type="text/javascript"> $(document).ready(function() { $menuLeft = $('.pushmenu-left'); $nav_list = $('#nav_list'); $nav_list.click(function() { $(this).toggleClass('active'); $('.pushmenu-push').toggleClass('pushmenu-push-toright'); $menuLeft.toggleClass('pushmenu-open'); }); }); </script></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript