[英]How to prevent scrolling on body content and enable scrolling on off-canvas navigation when open?
I have implemented a very basic off-canvas navigation( http://blog.tomri.ch/super-simple-off-canvas-menu-navigation/ ). 我已经实现了一个非常基本的画布外导航( http://blog.tomri.ch/super-simple-off-canvas-menu-navigation/ )。 The only issue I'm having is that you can't scroll the menu, this is especially problematic in mobile landscape mode, where the menu extends below the viewable screen area.
我唯一的问题是你无法滚动菜单,这在移动横向模式下尤其成问题,其中菜单延伸到可视屏幕区域下方。
I am wondering if there is a way, when the navigation menu is open, to prevent the content within the page-wrapper
div from scrolling and enable scrolling in the off-canvas navigation, and, if possible, not show a big ugly scrollbar on the navigation. 我想知道是否有一种方法,当导航菜单打开时,防止
page-wrapper
div内的内容滚动并在离开画布的导航中启用滚动,并且,如果可能的话,不显示大的丑陋滚动条导航。
HTML: HTML:
<nav id="menu">
<a href="#menu" class="menu-link"></a>
<ul>
<span><a href="#">Title</a></span>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
<div class="page-wrapper">
Body Content Here
</div>
CSS: CSS:
#menu {
position: fixed;
top: 0;
bottom: 0;
width: 13.755em;
right: -13.755em;
height: 100%;
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition: 0.15s ease;
-moz-transition: 0.15s ease;
-o-transition: 0.15s ease;
transition: 0.15s ease;
}
#menu.active {
-webkit-transform: translate(-13.755em, 0px);
-moz-transform: translate(-13.755em, 0px);
-o-transform: translate(-13.755em, 0px);
-ms-transform: translate(-13.755em, 0px);
transform: translate(-13.755em, 0px);
}
.page-wrapper {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition: 0.15s ease;
-moz-transition: 0.15s ease;
-o-transition: 0.15s ease;
transition: 0.15s ease;
}
.page-wrapper.active {
-webkit-transform: translate(-13.725em, 0px);
-moz-transform: translate(-13.725em, 0px);
-o-transform: translate(-13.725em, 0px);
-ms-transform: translate(-13.725em, 0px);
transform: translate(-13.725em, 0px);
}
.menu-link {
position: absolute;
top: 15px;
left: -50px;
}
Javascript: 使用Javascript:
$(".menu-link").click(function(){
$("#menu").toggleClass("active");
$(".page-wrapper").toggleClass("active");
});
To enable any block level element to scroll you give it overflow:auto;
要启用任何块级元素滚动,请将其
overflow:auto;
& depending on your site/app height:100%;
&取决于您的网站/应用
height:100%;
. 。 To disable scrolling on the main content there are a few things you can do, but you will have to experiment with them.
要禁用主要内容的滚动,您可以执行一些操作,但是您必须对它们进行实验。 You could have the nav extend to 100% width of the page, and the area where you see the content is just covered by an invisible element, to block scrolling or just keep scrolling the nav.
您可以将导航扩展到页面的100%宽度,并且您看到内容的区域仅由不可见元素覆盖,以阻止滚动或仅滚动导航。 You could, on click, disable/enable scrolling on the body also, note for best results apply
overflow:hidden;
你可以,点击,禁用/启用正文滚动,注意最佳结果应用
overflow:hidden;
on html,body
, it solves some cross browser / ios issues. 在
html,body
,它解决了一些跨浏览器/ ios问题。
Hope this gives you some insight! 希望这能为您提供一些见解!
Well you can add to your div container this attributes when te menu is opened 那么你可以在打开te菜单时将这个属性添加到你的div容器中
.container.active{
position:fixed;
width:100%;
}
or 要么
.container.active{
height:100%;
overflow:hidden;
}
as @Shan Robertson explain 正如@Shan Robertson解释的那样
Or just add a class with those attributes, that would block the main content to scrolll while the side nav is open. 或者只是添加一个具有这些属性的类,这会阻止主要内容在侧面导航打开时滚动。
您不必编写外部代码,只需在'afterOpen'设置'afterOpen'中写入:function(){$(“body”)。css(“overflow-y”,“hidden”);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.