我有一个从页面左侧滑出的推送菜单（从左到右），将页面向右滑动。我试图为它添加一个保护措施，如果链接超过页面高度，菜单是可滚动的。现在，它不起作用并且链接被隐藏。有人可以帮我弄清楚如何使菜单可滚动。我试过添加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>
3 回答
饮歌长啸
TA贡献1951条经验 获得超3个赞
我最终找到了一种方法，通过添加一个内部容器并在两者上使用溢出，在没有滚动条的情况下做我想做的事情。
.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;
}
拉丁的传说
TA贡献1789条经验 获得超8个赞
有一个名为 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;
}
倚天杖
TA贡献1828条经验 获得超3个赞
您可以使用此代码
<!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>
添加回答
举报
0/150
提交
取消