滑出菜单 - 文本不滚动

Question

我正在使用此 jsfiddle 中的 css： http://jsfiddle.net/fh6p4/

如您所见，文本没有滚动。我知道这与成为 position:fixed 有关，但我不知道如何解决这个问题 ..

所以强制我显示 js fiddle 代码，所以这里是：

$('#button').toggle( 
        function() {
            $('#right').animate({ left: 250 }, 'slow', function() {
                $('#button').html('Close');
            });
        }, 
        function() {
            $('#right').animate({ left: 0 }, 'slow', function() {
                $('#button').html('Menu');
            });
        }
    );

* {
        padding: 0px;
        margin: 0px;
    }
    
    #menubar {
        width:100%;
        background-color:#444;
        color: #fff;
        padding: 10px;
    }
    
    #button {
        cursor:pointer;
    }
    
    #menu, #right {
        display:inline;
    }
    
    #menu li a {
        padding: 10px;
        display: block;
        color: white;
        text-decoration: none;
    }
    
    #right {
        width:100%;
        background-color: #fff;
        z-index: 5;
        position: fixed;
        left: 0px;
        height: 100%;
        -webkit-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
            moz-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
              o-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
                box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
    }
    
    #right p {
        padding: 10px;
    }
    
    #menu {
        float:left;
        width: 350px;
        height: 100%;
    }
    
    #menu li {
        background-color:#444;
        border-bottom: 1px solid #888;
    }

<div id="menu">
        <ul>
            <li><a href="#">Menu Item 1</a></li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
            <li><a href="#">Menu Item 4</a></li>
            <li><a href="#">Menu Item 5</a></li>
            <li><a href="#">Menu Item 6</a></li>
            <li><a href="#">Menu Item 7</a></li>
            <li><a href="#">Menu Item 8</a></li>
            <li><a href="#">Menu Item 9</a></li>
            <li><a href="#">Menu Item 10</a></li>
            <li><a href="#">Menu Item 11</a></li>
            <li><a href="#">Menu Item 12</a></li>
        </ul>
    </div>
    <div id="right">
        <div id="menubar">
            <div id="button">
                Menu
            </div>
        </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
    </div>

Answer 1

将 overflow:scroll; 添加到 #right 会创建滚动条。但是，它也允许滚动菜单栏。

#right {
  overflow:scroll;
}

Answer 2

在您的代码中添加 overflow: scroll 将允许您在固定元素内滚动：

$('#button').toggle( 
        function() {
            $('#right').animate({ left: 250 }, 'slow', function() {
                $('#button').html('Close');
            });
        }, 
        function() {
            $('#right').animate({ left: 0 }, 'slow', function() {
                $('#button').html('Menu');
            });
        }
    );

* {
        padding: 0px;
        margin: 0px;
    }
    
    #menubar {
        width:100%;
        background-color:#444;
        color: #fff;
        padding: 10px;
    }
    
    #button {
        cursor:pointer;
    }
    
    #menu, #right {
        display:inline;
    }
    
    #menu li a {
        padding: 10px;
        display: block;
        color: white;
        text-decoration: none;
    }
    
    #right {
        width:100%;
        background-color: #fff;
        z-index: 5;
        position: fixed;
        left: 0px;
        height: 100%;
        overflow: scroll;
        -webkit-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
            moz-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
              o-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
                box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
    }
    
    #right p {
        padding: 10px;
    }
    
    #menu {
        float:left;
        width: 350px;
        height: 100%;
    }
    
    #menu li {
        background-color:#444;
        border-bottom: 1px solid #888;
    }

<div id="menu">
        <ul>
            <li><a href="#">Menu Item 1</a></li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
            <li><a href="#">Menu Item 4</a></li>
            <li><a href="#">Menu Item 5</a></li>
            <li><a href="#">Menu Item 6</a></li>
            <li><a href="#">Menu Item 7</a></li>
            <li><a href="#">Menu Item 8</a></li>
            <li><a href="#">Menu Item 9</a></li>
            <li><a href="#">Menu Item 10</a></li>
            <li><a href="#">Menu Item 11</a></li>
            <li><a href="#">Menu Item 12</a></li>
        </ul>
    </div>
    <div id="right">
        <div id="menubar">
            <div id="button">
                Menu
            </div>
        </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
    </div>

但是，我认为这是错误的做法。您的主要内容几乎从未有理由被修复，只有您的菜单应该被修复。举个例子，将下面的内容视为一种简单易行的方法来创建一个类似于您尝试制作的菜单，看看如果您分离出一些元素并使您的内容与数据严格分离会有多容易。

document.getElementById('menuButton').addEventListener('click', function(e){
  e.preventDefault();
  this.className = this.className === 'active' ? '' : 'active';
});
// This code is here to quickly create some content
for(var i = 0; i < 1000; i++){
  document.querySelector('article').textContent += 'Lorem Ipsum Dolor Sit Amet. ';
}

nav {
  width: 400px;
  left: -400px;
  top: 0;
  position: fixed;
  height: 100%;
  background: green;
  -webkit-transition: left .5s;
  transition: left .5s;
}
div {
  position: fixed;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: red;
  -webkit-transition: left .5s;
  transition: left .5s;
}
div.active {
  left: 410px;
}
div.active + nav {
  left: 0;
}
article {
  padding-top: 40px;
}

<div id="menuButton"></div>
<nav>
  <ul>
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
  </ul>
</nav>
<article>
  Content
</article>

Answer 3

将这段代码添加到 css 样式 sheet #right{..}

#right {

 max-height:250px;   //edit your own height
 overflow:scroll;
   }

Answer 4

仍然不确定答案，但是这个 fiddle 可能更接近您想要的行为...仍有问题需要解决

http://jsfiddle.net/eqLypgs1/2/

$('#button').toggle(

  function() {
    $('#right').animate({
      left: 250
    }, 'slow', function() {
      $('#button').html('Close');
    });
  },

  function() {
    $('#right').animate({
      left: 0
    }, 'slow', function() {
      $('#button').html('Menu');
    });
  });

* {
  padding: 0px;
  margin: 0px;
}
#menubar {
  width: 100%;
  background-color: #444;
  color: #fff;
  padding: 10px;
}
#button {
  cursor: pointer;
}
#menu,
#right {
  display: inline;
}
#menu li a {
  padding: 10px;
  display: block;
  color: white;
  text-decoration: none;
}
#right {
  width: 100%;
  background-color: #fff;
  position: absolute;
  z-index: 5;
  left: 0px;
  height: 90%;
  -webkit-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
  moz-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
  o-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
}
#right p {
  padding: 10px;
  display: block;
}
#menu {
  float: left;
  width: 350px;
  height: 100%;
}
#menu li {
  background-color: #444;
  border-bottom: 1px solid #888;
}

<div id="menu">
  <ul>
    <li><a href="#">Menu Item 1</a>

    </li>
    <li><a href="#">Menu Item 2</a>

    </li>
    <li><a href="#">Menu Item 3</a>

    </li>
    <li><a href="#">Menu Item 4</a>

    </li>
    <li><a href="#">Menu Item 5</a>

    </li>
    <li><a href="#">Menu Item 6</a>

    </li>
    <li><a href="#">Menu Item 7</a>

    </li>
    <li><a href="#">Menu Item 8</a>

    </li>
    <li><a href="#">Menu Item 9</a>

    </li>
    <li><a href="#">Menu Item 10</a>

    </li>
    <li><a href="#">Menu Item 11</a>

    </li>
    <li><a href="#">Menu Item 12</a>

    </li>
  </ul>

</div>
<div id="menubar">
  <div id="button">Menu</div>
</div>
<div id="right">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
    tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
    lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
    tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
    lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
    tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
    lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
    tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
    lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
    tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
    lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
    tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
    lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
    tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
    lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
    tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
    lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
    tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
    lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
</div>

滑出菜单 - 文本不滚动

Slide out menu - text not scrolling

css

css-position