CSS可以用来隐藏滚动条吗?你会怎么做?
当前回答
您可以使用隐藏溢出的包装器div,并将内部div设置为auto来实现这一点。
要删除内部div的滚动条,可以通过对内部div应用负边距将其从外部div的视口中拉出。然后对内部div使用相等的填充,以使内容保持在视图中。
JSFiddle公司
###HTML格式
<div class="hide-scroll">
<div class="viewport">
...
</div>
</div>
###CSS格式
.hide-scroll {
overflow: hidden;
}
.viewport {
overflow: auto;
/* Make sure the inner div is not larger than the container
* so that we have room to scroll.
*/
max-height: 100%;
/* Pick an arbitrary margin/padding that should be bigger
* than the max scrollbar width across the devices that
* you are supporting.
* padding = -margin
*/
margin-right: -100px;
padding-right: 100px;
}
其他回答
我编写了一个WebKit版本,其中包含一些选项,如自动隐藏、小版本、仅滚动-y或仅滚动-x:
._scrollable{
@size: 15px;
@little_version_ratio: 2;
@scrollbar-bg-color: rgba(0,0,0,0.15);
@scrollbar-handler-color: rgba(0,0,0,0.15);
@scrollbar-handler-color-hover: rgba(0,0,0,0.3);
@scrollbar-coner-color: rgba(0,0,0,0);
overflow-y: scroll;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 100%;
&::-webkit-scrollbar {
background: none;
width: @size;
height: @size;
}
&::-webkit-scrollbar-track {
background-color:@scrollbar-bg-color;
border-radius: @size;
}
&::-webkit-scrollbar-thumb {
border-radius: @size;
background-color:@scrollbar-handler-color;
&:hover{
background-color:@scrollbar-handler-color-hover;
}
}
&::-webkit-scrollbar-corner {
background-color: @scrollbar-coner-color;
}
&.little{
&::-webkit-scrollbar {
background: none;
width: @size / @little_version_ratio;
height: @size / @little_version_ratio;
}
&::-webkit-scrollbar-track {
border-radius: @size / @little_version_ratio;
}
&::-webkit-scrollbar-thumb {
border-radius: @size / @little_version_ratio;
}
}
&.autoHideScrollbar{
overflow-x: hidden;
overflow-y: hidden;
&:hover{
overflow-y: scroll;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
&.only-y{
overflow-y: scroll !important;
overflow-x: hidden !important;
}
&.only-x{
overflow-x: scroll !important;
overflow-y: hidden !important;
}
}
}
&.only-y:not(.autoHideScrollbar){
overflow-y: scroll !important;
overflow-x: hidden !important;
}
&.only-x:not(.autoHideScrollbar){
overflow-x: scroll !important;
overflow-y: hidden !important;
}
}
http://codepen.io/hicTech/pen/KmKrjb
我相信您可以使用溢出CSS属性来操作它,但他们的浏览器支持有限。一位消息人士表示,它是Internet Explorer 5(及更高版本)、Firefox 1.5(及更新版本)和Safari 3(及更晚版本)——也许足以满足您的需求。
滚动,滚动,滚动有很好的讨论。
设置溢出:隐藏;在body标签上,如下所示:
<style type="text/css">
body {
overflow: hidden;
}
</style>
上面的代码“隐藏”了水平和垂直滚动条。
如果要仅隐藏垂直滚动条,请使用overflow-y:
<style type="text/css">
body {
overflow-y: hidden;
}
</style>
如果您只想隐藏水平滚动条,请使用overflow-x:
<style type="text/css">
body {
overflow-x: hidden;
}
</style>
如果需要,内容将被剪裁以适合填充框。不提供滚动条,也不允许用户滚动(例如通过拖动或使用滚轮)。内容可以通过编程方式滚动(例如,通过设置属性值,如offsetLeft),因此元素仍然是滚动容器。(来源)
正如其他人已经说过的,使用CSS溢出。
但如果您仍然希望用户能够滚动该内容(滚动条不可见),则必须使用JavaScript。
在这里回答我的问题:隐藏滚动条,同时仍然可以使用鼠标/键盘滚动
我的HTML是这样的:
<div class="container">
<div class="content">
</div>
</div>
将其添加到要隐藏滚动条的div中:
.content {
position: absolute;
right: -100px;
overflow-y: auto;
overflow-x: hidden;
height: 75%; /* This can be any value of your choice */
}
并将其添加到容器中
.container {
overflow-x: hidden;
max-height: 100%;
max-width: 100%;
}