CSS可以用来隐藏滚动条吗?你会怎么做?
当前回答
设置溢出:隐藏;在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溢出属性:
.noscroll {
width: 150px;
height: 150px;
overflow: auto; /* Or hidden, or visible */
}
以下是更多示例:
溢出-x,溢出-y测试CSS溢出属性
要禁用垂直滚动条,只需添加overflow-y:hidden;。
了解更多信息:溢出。
这对我来说适用于简单的CSS财产:
.container {
-ms-overflow-style: none; // Internet Explorer 10+
scrollbar-width: none; // Firefox
}
.container::-webkit-scrollbar {
display: none; // Safari and Chrome
}
对于旧版本的Firefox,请使用:overflow:-moz滚动条none;
我编写了一个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
如果你们还感兴趣的话,我想我为你们找到了一个变通办法。这是我的第一个星期,但这对我很有用。。。
<div class="contentScroller">
<div class="content">
</div>
</div>
.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}