当俯视菜单(画布外)可见时禁用滚动

时间:2016-05-22 04:38:28

标签: javascript jquery greensock off-canvas-menu

我正在制作一个画布外推送菜单,一切正常,有些方面我似乎无法弄明白。

  1. 如何禁用滚动内容包装器。

  2. 如何仅滚动画布菜单。现在它滚动网站本身的高度。

  3. 这是一个代码笔,向您展示我遇到的问题。

    code pen demo

    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);
    

    谢谢!

2 个答案:

答案 0 :(得分:0)

据我所知,你想要在菜单打开时禁用内容包装器的滚动,同时应该为菜单启用滚动。

你只需要从#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;
}

答案 1 :(得分:0)

我能够通过在内容周围添加容器(.app)并将此css应用于项目来解决此问题。

List<String> comboxTable = new List<string>();  
comboxTable = comboxTable.Where(m => !string.IsNullOrEmpty(m)).ToList();

我更新了codepen以反映这些更改。