时间戳

首页 > 解决方案 > 使 javascript 推送菜单可滚动（无滚动条）

javascript - 使 javascript 推送菜单可滚动（无滚动条）

问题描述

我有一个从页面左侧滑出的推送菜单（从左到右），将页面向右滑动。我正在尝试为其添加保护措施，如果链接超过页面高度，则菜单可滚动。现在，它不起作用并且链接被隐藏。有人可以帮我弄清楚如何使菜单可滚动。

我尝试添加scroll-y: scroll几个 css 元素，但这似乎没有任何区别。我希望滚动功能也可以在手机上使用，也可以通过触摸滚动。

而且，我想看看当菜单打开时如何禁用“body”上的滚动。

$(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>
	  
	  
	<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>
</body>

标签： javascripthtmlcss

解决方案

有一个名为 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;

}

推荐阅读