[英]Disable scroll when push over menu (off-canvas) is visible
我正在构建一个画布外推菜单,并且一切正常,我似乎无法弄清某些方面。
如何禁用内容包装器的滚动。
如何只滚动画布菜单。 现在,它滚动了网站本身的高度。
这是一支代码笔,向您显示我遇到的问题。
的HTML
<div id="menu">
<h1>This is the push over menu</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias id accusantium, consequatur, repellendus iure impedit consectetur aspernatur quas quo. Doloremque, facere autem ex tempora dicta consequuntur, possimus minima natus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint quis voluptatibus, nesciunt debitis ea ullam consectetur illo cum odit nobis explicabo cumque, vitae quia dolores, fugit maxime ad nisi earum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptatibus dignissimos possimus, voluptatem ducimus illum voluptate deleniti et culpa autem laboriosam, pariatur voluptates enim facilis, animi nesciunt dolor expedita repellat.</p>
</div>
<div id="burger-icon">
<h2>burger menu</h2>
</div>
<div id="content-wrapper">
<h1>Main Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum ullam, alias dignissimos dolore, a ratione dicta ipsam delectus facilis quod voluptates autem beatae sed impedit eligendi, consequuntur necessitatibus modi nemo?</p>
</div>
的CSS
#menu{
position: absolute;
left: -100%;
background-color:red;
width: 100%;
min-height: 100%;
z-index: 1000;
padding-top: 50px;
}
#burger-icon {
position:fixed;
top: 10px;
left: 10px;
color: yellow;
cursor: pointer;
z-index: 2000;
}
#content-wrapper {
padding-top: 40px;
background-color: #000;
color: #fff;
min-height: 200vh;
}
JS
var isOpen = false;
// sets the about off screen number
var aboutOffPosition = $("#menu").css("left");
//console.log($("#about").css("left"));
function openMenu() {
// console.log("burger clicked");
if(isOpen === false)
{
// slide over the about section
TweenMax.to($("#menu"),".75", {left:0, ease: Power1.easeIn});
// move over the content
TweenMax.to($("#content-wrapper"),1, {x:500, ease: Power1.easeIn});
isOpen = true;
}
else{
// slide back the about section
TweenMax.to($("#menu"),".75", {left:aboutOffPosition, ease: Power1.easeIn});
// move back the content
TweenMax.to($("#content-wrapper"),".5", {x:0, ease: Power1.easeIn});
isOpen = false;
}
}
// burger icon
$('#burger-icon').click(openMenu);
谢谢!
据我了解,您想在菜单打开时禁用content-wrapper的滚动,同时应启用菜单滚动。
您只需要从#content-wrapper中删除min-height,然后将overflow设置为hidden即可隐藏滚动条。
#content-wrapper {
padding-top: 40px;
background-color: #000;
color: #fff;
overflow:hidden;
}
#menu{
position: absolute;
left: -100%;
background-color:red;
width: 100%;
height: auto;
z-index: 1000;
padding-top: 50px;
}
我可以通过在内容周围添加一个容器(.app)并将此CSS应用于项目来解决此问题。
body {
// scroll fix
height: 100%;
overflow: hidden;
// end scroll fix
}
.app {
// scroll fix
overflow-y: scroll;
height: 100vh;
// end scroll fix
}
#about {
height: 100vh;
overflow-y: auto;
position: fixed;
top: 0;
right: 0;
}
我更新了代码笔以反映这些更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.