使用 CSS 滚动没有滚动条的元素答案

【问题标题】：Scrolling element without scrollbar with CSS使用 CSS 滚动没有滚动条的元素
【发布时间】：2013-10-19 13:49:35
【问题描述】：

左侧边栏、全高、固定位置、需要在没有滚动条的情况下访问的内容溢出（这意味着没有overflow: scroll）。我真的不想在 Javascript 中这样做。

几个月前，我在 CSS 中使用 overflow: hidden 和其他东西完成了这项工作，但现在我找不到代码或不记得它是如何完成的。出于某种原因，谷歌对此毫无用处。这个侧边栏在我的网站上的右侧有内容，并在页面下方继续。条形图本身在屏幕上的垂直尺寸已经超过了。

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

我已经尝试了所有我能想到的position、float、overflow、height/max-height、top、bottom、left 和 display 的组合.也尝试了很多其他的东西，但没有运气。

非常感谢任何帮助。

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,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, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <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, consectetuer adipiscing elit, 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, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.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, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <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, consectetuer adipiscing elit, 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, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.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, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <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, consectetuer adipiscing elit, 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, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.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, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <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, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>
    </div>
  </div>

【问题讨论】：

如果你有一个固定宽度和高度的div，并且溢出是隐藏的，如果你没有滚动条，你如何假设你可以访问容器边缘之外的内容？您打算使用向上/向下箭头吗？您需要一些导航辅助来访问不可见的内容，并且除非您使用 JavaScript 构建某些东西，否则需要滚动条。
@MarcAudet 我相信他想要它们，只是不希望它们可见。我认为没有 javascript 没有其他选择
有而且我已经做到了。我只是不记得怎么了。并且 div 实际上并不是固定的硬件。包装器是视口的高度，内部 div 没有限制。感谢 cmets。

标签： html css scroll scrollbar

【解决方案1】：

如果可以设置父级的高度和宽度left-wrap，可以这样：

#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,26,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

【讨论】：

所以这行得通，甚至可能是我不久前所做的，谢谢你的帮助。我不是临时变通办法（填充+偏移）的忠实拥护者，但它比我以前拥有的要多。
我知道这是如何工作的。善用 CSS。实际上，隐藏滚动条会使某些用户无法访问内容，但在这种情况下，它可能不是要求中的一个因素。