我希望能够滚动整个页面,但不显示滚动条。
在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。
当前回答
我碰巧在我的项目中尝试了上述解决方案,由于某些原因,由于div定位,我无法隐藏滚动条。因此,我决定通过引入一个表面覆盖滚动条的div来隐藏滚动条。下面的示例适用于水平滚动条:
<div id="container">
<div id="content">
My content that could overflow horizontally
</div>
<div id="scroll-cover">
</div>
</div>
对应的CSS如下:
#container{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#content{
width: 100%;
height: 100%;
overflow-x: scroll;
}
#scroll-cover{
width: 100%;
height: 20px;
position: absolute;
bottom: 0;
background-color: #fff; /*change this to match color of page*/
}
其他回答
这将在正文中:
<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;
}
Use:
<div style='overflow:hidden; width:500px;'>
<div style='overflow:scroll; width:508px'>
My scroll-able area
</div>
</div>
这是一个技巧,可以将滚动条与没有滚动条的重叠div稍微重叠:
::-webkit-scrollbar {
display: none;
}
这仅适用于WebKit浏览器。。。或者您可以使用浏览器特定的CSS内容(如果将来有)。每个浏览器可以为其各自的栏设置不同的特定属性。
对于Microsoft Edge,使用:-ms溢出样式:-ms自动隐藏滚动条;或-ms溢出样式:无;根据MSDN。
Firefox没有同等的功能。尽管有一个jQuery插件来实现这一点,http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
这个答案不包括代码,所以下面是第页的解决方案:
根据页面的说法,这种方法不需要提前知道滚动条的宽度就可以工作,而且解决方案也适用于所有浏览器,可以在这里看到。
好的是,您不必使用填充或宽度差异来隐藏滚动条。
这也是缩放安全的。填充/宽度解决方案在缩放到最小值时显示滚动条。
Firefox修复程序:http://jsbin.com/mugiqoveko/1/edit?output
要素.外部容器{宽度:200px;高度:200px;}.外部容器{边框:5px纯紫色;位置:相对;溢出:隐藏;}.内部容器{位置:绝对;左:0;overflow-x:隐藏;overflow-y:滚动;右填充:150px;}.内部容器::-webkit滚动条{显示:无;}<div class=“outer container”><div class=“内部容器”><div class=“element”>Lorem ipsum dolor坐amet,consectetur adipiscing elit。整数车辆quam nibh,eu tristique tellus dignissim quis。整体调味品ultrices elit ut mattis。Praesent rhoncus tortor metus,nec pellentesque enim mattis nec。Nulla vitae turpis utdui consectetur pellentesque quis vel est。Curabitur rutrum,mauris ut mollis lobortis,sem est congue lectus,ut sodales nunc leo a libero。克雷斯·萨皮恩(Cras quis sapien)在米弗利利亚·坦普斯(mi frigilla tempus)调味品奎斯·韦利特(quis velit)中。Aliquam和Aliquam arcu。Morbi三体阿利奎姆·鲁特鲁姆(aliquam rutrum)。杜伊斯·廷西杜特(Duis tincidunt)、兽人(orci suscipit cursus interstie)、普鲁斯·尼西·法雷特拉(purus nisi phareta dui)、米的迪格尼斯·菲利斯·图比斯(tempor dignissim felis turpis)。Vestibulum turpis neque,调味品,调戏维尔·茹斯托。不要骚扰我,不要骚扰我。还有一个巨大的sem。Quisque id magna ultrices,lobortis dui eget,pretium libero。在未成年人之前,库拉比特人(Curabitur aliquam)。</div></div></div>
如果出于某种原因,您希望使用box模型:border box,则向内部div添加填充(如当前接受的答案)将不起作用。
在这两种情况下都有效的方法是将内部div的宽度增加到100%加上滚动条的宽度(假设溢出:隐藏在外部div上)。
例如,在CSS中:
.container2 {
width: calc(100% + 19px);
}
在JavaScript中,跨浏览器:
var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';
.className::-webkit-scrollbar{
display: none;
}
除了“溢出”之外,你写的所有内容都是正确的。适用于Chrome和其他浏览器的webkit
overflow-y: scroll;
or
overflow-y: auto;
对于Firefox和Edge
scrollbar-width: none;
or
scrollbar-width: thin;