使用 CSS 滚动没有滚动条的元素
[英] Scrolling element without scrollbar with CSS
本文介绍了使用 CSS 滚动没有滚动条的元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
JSbin 用于视觉效果和代码.
左侧边栏、全高、固定位置、需要在没有滚动条的情况下访问的内容溢出(这意味着没有 overflow: scroll).我真的不想在 Javascript 中执行此操作.
几个月前，我在 CSS 中使用 overflow: hidden 和其他东西完成了这项工作，但现在我找不到代码或不记得它是如何完成的.出于某种原因，谷歌对此毫无用处.在我的网站上，此侧边栏的右侧有内容，继续向下延伸到页面.条形图本身不仅可以垂直放置在屏幕上.
我需要能够向下滚动这个对象，无论它是固定的还是绝对的，并且它必须一直向下跨越页面的高度.滚动主要内容和侧边栏是独立的.到目前为止，即使设置为绝对，包装器也会在页面底部停止.
我尝试了 position、float、overflow、height/max 的所有组合我能想到的-height、top、bottom、left 和display.也尝试了很多其他的东西，但都没有运气.
非常感谢任何帮助.
CSS:
#left-wrap {位置:固定；顶部:0；左:0；底部:0；z-索引:3；最大宽度:24em；高度:100%；溢出:隐藏；背景颜色:rgba(26,26,26,1);}#左栏{最大宽度:100%；最大高度:无；位置:相对；}#left-bar.sidebars .block {填充:5%；边界右:无；保证金:5%；背景颜色:rgba(255,255,238,0.4);底边距:1.5em；字体大小:0.9em；溢出:隐藏；}.sidebars .block ul {边距:0；填充:0；列表样式:无；}.sidebars h2 {填充:0；保证金:5% 10% 0；字体大小:1.75em；文本转换:小写；字体粗细:400；文本对齐:右；/*border-bottom: 1px 虚线 #9c561b;颜色:#9c561b；文本阴影:#130b08 0 1px 0;*/}#left-wrap a {颜色:#FDC；}
HTML:
<div id="left-bar" class="sidebars"><div class="block"><h2>标题一</h2><ul class="菜单"><li>链接一</li><li>链接二</li><li>链接二十五</li><li>链接七十</li><li>链接一百五十二</li><li>链接零</li>
<div class="block"><h2>标题二</h2><p>Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinciduntvolutpat.Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p>Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinciduntvolutpat.
<div class="block"><h2>标题三</h2><ul class="菜单"><li>链接一</li><li>链接二</li><li>链接二十五</li><li>链接七十</li><li>链接一百五十二</li><li>链接零</li>
<div class="block"><h2>标题四</h2><p>Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinciduntvolutpat.Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p>Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinciduntvolutpat.
<div class="block"><h2>标题五</h2><ul class="菜单"><li>链接一</li><li>链接二</li><li>链接二十五</li><li>链接七十</li><li>链接一百五十二</li><li>链接零</li>
<div class="block"><h2>标题六</h2><p>Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinciduntvolutpat.Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p>Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinciduntvolutpat.
<div class="block"><h2>标题七</h2><ul class="菜单"><li>链接一</li><li>链接二</li><li>链接二十五</li><li>链接七十</li><li>链接一百五十二</li><li>链接零</li>
<div class="block"><h2>标题八</h2><p>Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinciduntvolutpat.Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p>Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sat amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinciduntvolutpat.
解决方案
如果可以设置父级的高度和宽度，left-wrap，可以这样:
#left-wrap {位置:绝对；顶部:0；左:0；底部:0；/* 不知道为什么会在这里 */z-索引:3；最大宽度:24em；最大高度:无；溢出:隐藏；高度:100%；/* 据我所知，需要给出高度和宽度 */宽度:1000px；/* 它们可以是你想要的任何尺寸，'当然 */背景颜色:rgba(26,26,26,1);}#左栏{最大宽度:100%；最大高度:100%；/* 防止它根据其内容自动调整大小 */位置:绝对；右:-20px；/* 向右移动元素 */padding-right: 10px;/* 使用填充将元素移回原位 */溢出-y:滚动；/* 确保有滚动条 */}
此处演示
JSbin here for visuals and code.
Left sidebar, full height, fixed position, content overflows that needs to be accessible WITHOUT scrollbars (that means no overflow: scroll). I really don't want to do this in Javascript.
At one point months ago, I accomplished this in CSS with overflow: hidden and something else and now I can't find the code or remember how it was done. And Google is useless for this for some reason. This sidebar has content to the right of it on my site that continues down the page. The bar itself has more than fits vertically on the screen.
I need to be able to scroll down this object, whether it's fixed or absolute, and it must span the height of the page all the way down. Scrolling main content and the sidebar are independent. So far, even with setting to absolute, the wrapper will stop way short of the page bottom.
I've tried every combination of position, float, overflow, height/max-height, top, bottom, left and display that I can think of. Tried lots of other stuff too with no luck.
Any help is greatly appreciated.
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>
解决方案
If you can set the height and width of the parent, left-wrap, you can do it this way:
#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 滚动没有滚动条的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
