我希望能够滚动整个页面,但不显示滚动条。
在Google Chrome中,它是:
::-webkit-scrollbar {
display: none;
}
但Mozilla Firefox和Internet Explorer似乎不是这样工作的。
我也在CSS中尝试过:
overflow: hidden;
这确实隐藏了滚动条,但我不能再滚动了。
有没有一种方法可以删除滚动条,同时仍然可以滚动整个页面?
请只使用CSS或HTML。
我希望能够滚动整个页面,但不显示滚动条。
在Google Chrome中,它是:
::-webkit-scrollbar {
display: none;
}
但Mozilla Firefox和Internet Explorer似乎不是这样工作的。
我也在CSS中尝试过:
overflow: hidden;
这确实隐藏了滚动条,但我不能再滚动了。
有没有一种方法可以删除滚动条,同时仍然可以滚动整个页面?
请只使用CSS或HTML。
当前回答
这是我如何做水平滚动;只有CSS,并且可以很好地与Bootstrap/col-*等框架配合使用。它只需要两个额外的div和设置了width或max width的父级:
如果您有触摸屏,您可以选择文本使其滚动或用手指滚动。
.overflow-x-scroll-no滚动条{溢出:隐藏;}.overflow-x-scroll-no-scrollbar div{overflow-x:隐藏;边距底部:-17px;overflow-y:隐藏;宽度:100%;}.overflow-x-scroll-no-scrollbar div*{溢出-x:自动;宽度:100%;填充底部:17px;空白:nowrap;光标:指针}/*下面的类只是为了使示例看起来更好*/.行{宽度:100%}.col-xs-4列{宽度:33%;浮动:左侧}.col-xs-3列{宽度:25%;浮动:左侧}.bg灰色{背景色:#DDDDD}.bg橙色{背景色:#FF9966}.bg蓝色{背景色:#6699FF}.bg橙色灯{背景色:#FFAA88}.bg蓝光{背景色:#88AAFF}<html><body><div class=“row”><div class=“col-xs-4 bg orange”>第1列</div>第2列</div><div class=“col-xs-4 bg blue”>第3列</div></div><div class=“row”><div class=“col-xs-4 bg橙色灯光”>内容1</div><div class=“col-xs-3溢出-x-scroll-no-scrollbar”><div><div>这个内容对于容器来说太长了,所以它需要隐藏,但不需要滚动条就可以滚动</div></div><div class=“col-xs-4 bg蓝光”>内容3</div></div></body></html>
懒人版:
.overflow-x-scroll-no滚动条{溢出:隐藏;}.overflow-x-scroll-no-scrollbar div{overflow-x:隐藏;边距底部:-17px;overflow-y:隐藏;宽度:100%;}.overflow-x-scroll-no-scrollbar div*{溢出-x:自动;宽度:100%;填充底部:17px;空白:nowrap;光标:指针}/*下面的类只是为了使示例看起来更好*/.父样式{宽度:100px;背景色:#FF9966}<div class=“父样式溢出-x-scroll-no-scrollbar”><div><div>这个内容对于容器来说太长了,所以它需要隐藏,但不需要滚动条就可以滚动</div></div>
其他回答
这将在正文中:
<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>
</div>
这是CSS:
#maincontainer
{
background: grey;
width: 101%;
height: 101%;
overflow: auto;
position: fixed;
}
#child
{
background: white;
height: 500px;
}
只是一个测试,效果很好。
#parent{
width: 100%;
height: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
工作Fiddle
JavaScript:
由于不同浏览器的滚动条宽度不同,最好使用JavaScript处理。如果执行Element.offsetWidth-Element.clientWidth,将显示精确的滚动条宽度。
JavaScript工作Fiddle
Or
使用位置:绝对,
#parent{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
工作Fiddle
JavaScript工作Fiddle
信息:
基于这个答案,我创建了一个简单的滚动插件。
.className::-webkit-scrollbar{
display: none;
}
除了“溢出”之外,你写的所有内容都是正确的。适用于Chrome和其他浏览器的webkit
overflow-y: scroll;
or
overflow-y: auto;
对于Firefox和Edge
scrollbar-width: none;
or
scrollbar-width: thin;
我遇到了这个问题,解决起来非常简单。
取两个容器。内部将是可滚动的容器,外部显然将容纳内部:
#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }
它非常简单,适用于任何浏览器。
要隐藏内容溢出的元素的滚动条,请使用。
.div{
scrollbar-width: none; /* The most elegant way for Firefox */
}