html – 滚动元素没有滚动条与CSS

JSbin here for visuals and code.

左侧边栏,全高,固定位置,内容溢出,无需滚动条即可访问(这意味着没有溢出：滚动).我真的不想在Javascript中这样做.

几个月前,我在CSS中用overflow：hidden和其他东西完成了这个,现在我找不到代码或记住它是如何完成的.由于某些原因,Google对此无用.此侧边栏的内容位于我的网站右侧,继续向下滚动.酒吧本身不仅可以垂直放置在屏幕上.

我需要能够向下滚动这个对象,无论它是固定的还是绝对的,它必须一直跨越页面的高度.滚动主要内容和侧边栏是独立的.到目前为止,即使设置为绝对,包装器也会停止在页面底部之外.

我已经尝试了我能想到的位置,浮动,溢出,高度/最大高度,顶部,底部,左侧和显示的每个组合.在没有运气的情况下尝试了很多其他的东西.

任何帮助是极大的赞赏.

CSS：

#left-wrap {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 3;
  max-width: 24em;
  height: 100%;  
  overflow: hidden;
  background-color: rgba(26,26,1);
}
#left-bar {
  max-width: 100%;
  max-height: none;
  position: relative;
}
#left-bar.sidebars .block {
  padding: 5%;
  border-right: none;
  margin:  5%;
  background-color: rgba(255,255,238,0.4);
  margin-bottom: 1.5em;
  font-size: 0.9em;
  overflow: hidden;
}
.sidebars .block ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebars h2 {
  padding: 0;
  margin: 5% 10% 0;
  font-size: 1.75em;
  text-transform: lowercase;
  font-weight: 400;
  text-align: right;
  /*border-bottom: 1px dashed #9c561b;  
  color: #9c561b;
  text-shadow:#130b08 0 1px 0;*/
}
#left-wrap a {
  color: #FDC;
}

HTML：

<div id="left-wrap">
  <div id="left-bar" class="sidebars">
      <div class="block">
        <h2>Title One</h2>
        <ul class="menu">
          <li>Link One</li>
          <li>Link Two</li>
          <li>Link Twenty-five</li>
          <li>Link Seventy</li>
          <li>Link One Hundred Fifty-two</li>
          <li>Link Zero</li>
        </ul>
      </div>
      <div class="block">
        <h2>Title Two</h2>
        <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <p>Lorem ipsum dolor sit amet,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>      
      <div class="block">
        <h2>Title Three</h2>
        <ul class="menu">
          <li>Link One</li>
          <li>Link Two</li>
          <li>Link Twenty-five</li>
          <li>Link Seventy</li>
          <li>Link One Hundred Fifty-two</li>
          <li>Link Zero</li>
        </ul>
      </div>
      <div class="block">
        <h2>Title Four</h2>
        <p>Lorem ipsum dolor sit amet,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>      
      <div class="block">
        <h2>Title Five</h2>
        <ul class="menu">
          <li>Link One</li>
          <li>Link Two</li>
          <li>Link Twenty-five</li>
          <li>Link Seventy</li>
          <li>Link One Hundred Fifty-two</li>
          <li>Link Zero</li>
        </ul>
      </div>
      <div class="block">
        <h2>Title Six</h2>
        <p>Lorem ipsum dolor sit amet,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>      
      <div class="block">
        <h2>Title Seven</h2>
        <ul class="menu">
          <li>Link One</li>
          <li>Link Two</li>
          <li>Link Twenty-five</li>
          <li>Link Seventy</li>
          <li>Link One Hundred Fifty-two</li>
          <li>Link Zero</li>
        </ul>
      </div>
      <div class="block">
        <h2>Title Eight</h2>
        <p>Lorem ipsum dolor sit amet,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>
    </div>
  </div>

解决方法

如果您可以设置父级左侧包装的高度和宽度,您可以这样做：

#left-wrap {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0; /* Not sure why this is here */
  z-index: 3;
  max-width: 24em;
  max-height: none;  
  overflow: hidden;
  height:100%; /* Needs to be given a height and width as far as I kNow */
  width:1000px; /* They can be whatever dimensions you'd like,'course */
  background-color: rgba(26,1);
}
#left-bar {
  max-width: 100%;
  max-height: 100%; /* Prevents it from auto sizing to its content */
  position:absolute;
  right: -20px; /* Shifts element to the right */
  padding-right: 10px; /* Uses padding to move element back into position */
  overflow-y: scroll; /* Makes sure that there is a scrollbar */
}

Demo Here

原文地址：https://www.jb51.cc/html/231867.html