如何在html中隐藏滚动条?
问题描述:
我想隐藏滚动条,但在同样的情况下,我也想要滚动动作,例如 我想隐藏滚动条,但仍然希望滚动以查看其余内容而不实际看到滚动条。如何在html中隐藏滚动条?
overflow: hidden
将无法正常工作,因为使用后我无法滚动查看内容。
如何使用HTML/CSS/javascript?
我正在使用造型滚动条,但我注意到没有定义明确的滚动条样式,所以我用jQuery制作了使用div的自定义滚动条,但最后我有两个滚动条,其中一个是我制作的默认滚动条,现在我想隐藏默认滚动条。
我不想使用-webkit-,因为它在所有浏览器中都不被接受。
我想在下面的代码中隐藏滚动条。
\t \t .container{
width: 100%;
background-color: #d5d5d5;
}
.sidebarcontainer{
width: 300PX;
height: 6000px;
display: inline-block;
box-sizing: border-box;
padding: 5px;
padding-right: 2px;
}
.innersidebarcontainer{
position: relative;
width: 100%;
height: 100%;
}
.sidebar{
width: 300px;
background-color: teal;
height: 2000px;
top: 1px;
position: absolute;
}
.mainpage{
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 6000px;
display: inline-block;
box-sizing: border-box;
}
.page{
width: 100%;
height: 100%;
background-color: white;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}
<body>
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
</div>
</div>
</div>
<div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
</body>
请人解答!
答
并溢出:auto;是不是有问题?
如果你不需要,但不会显示,如果你不需要,但是当你这样做时显示。
答
您需要添加以下样式:
#parent {
height: 100%;
width: 100%;
overflow: hidden;
}
#child {
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px;
}
这里是工作提琴:http://jsfiddle.net/5GCsJ/954/
+0
你能否提供与我的代码相关的解决方案? – Rahul
答
让你的滚动条透明。您可以通过以下代码来完成此操作。
::-webkit-scrollbar
{
width:0px;
}
::-webkit-scrollbar-track-piece
{
background-color: transparent;
}
希望这会帮助你!
可能重复[隐藏滚动条,但仍然可以滚动](https://*.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll) –
或者这是你想要的? https://*.com/questions/20447384/cant-hide-scrollbar-when-using-overflow-auto – Dennis