我希望能够滚动浏览整个页面，但不显示滚动条。
在谷歌浏览器中它是：
::-webkit-scrollbar {
display: none;
}
但Mozilla Firefox和Internet Explorer似乎不那么有用。
我也在CSS中试过这个：
overflow: hidden;
这确实隐藏了滚动条，但我不能滚动了。
有什么办法可以删除滚动条，同时还能滚动整个页面吗？ 请使用CSS或HTML。
答案 0 :(得分：659)
只是一项工作正常的测试。
#parent{
height: 100%;
width: 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 */
}
<强> Working Fiddle
由于滚动条宽度在不同浏览器中有所不同，因此最好使用JavaScript处理它。如果您执行Element.offsetWidth - Element.clientWidth，则会显示确切的滚动条宽度。
使用Position: absolute，
#parent{
height: 100%;
width: 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;
}
<强> Working Fiddle
根据这个答案，我创建了一个simple scroll plugin。我希望这会对某人有所帮助。
答案 1 :(得分：287)
WebKit很容易，可选样式：
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
答案 2 :(得分：158)
这适用于简单的CSS属性：
.container {
-ms-overflow-style: none; // IE 10+
scrollbar-width: none; // Firefox
}
.container::-webkit-scrollbar {
display: none; // Safari and Chrome
}
更新：为Firefox添加了新的scrollbar-width属性。
对于旧版本的Firefox，请使用：overflow: -moz-scrollbars-none;
答案 3 :(得分：131)
<强>更新 Firefox现在支持使用CSS隐藏滚动条，因此现在涵盖所有主流浏览器（Chrome，Firefox，IE，Safari等）。
只需将以下CSS应用于要从中删除滚动条的元素：
.container {
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
}
这是我目前所知道的最不起眼的跨浏览器解决方案。 Check out the demo.
原始答案：
这是另一种尚未被提及的方式。它非常简单，只涉及两个div和CSS。不需要JavaScript或专有CSS，它适用于所有浏览器。它不需要明确地设置容器的宽度，因此使其成为流体。
此方法使用负边距将滚动条移出父级，然后使用相同数量的填充将内容推回到其原始位置。该技术适用于垂直，水平和双向滚动。
演示：
垂直版本的示例代码：
HTML：
<div class="parent">
<div class="child">
Your content.
</div>
</div>
CSS：
.parent{
width: 400px;
height: 200px;
border: 1px solid #aaa;
overflow: hidden;
}
.child{
height: 100%;
margin-right: -50px; /* maximum width of scrollbar */
padding-right: 50px; /* maximum width of scrollbar */
overflow-y: scroll;
}
答案 4 :(得分：71)
使用：
<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-overflow-style: -ms-autohiding-scrollbar;或-ms-overflow-style: none;作为per MSDN。
没有Firefox的等价物。 虽然有一个jQuery插件来实现这一点， http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
答案 5 :(得分：33)
This answer不包含代码，因此以下是page的解决方案：
根据页面，这种方法不需要提前知道滚动条的宽度以便工作，解决方案也适用于所有浏览器，并且可以看到here。
好处是你不会被迫使用填充或宽度差来隐藏滚动条。
这也是变焦安全的。填充/宽度解决方案在缩放到最小时显示滚动条。
Firefox修复：http://jsbin.com/mugiqoveko/1/edit?output
.element,
.outer-container {
width: 200px;
height: 200px;
}
.outer-container {
border: 5px solid purple;
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
padding-right: 150px;
}
.inner-container::-webkit-scrollbar {
display: none;
}<div class="outer-container">
<div class="inner-container">
<div class="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut
dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique
aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie
vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.
</div>
</div>
</div>
答案 6 :(得分：18)
只需使用以下三行，您的问题就会解决：
#liaddshapes::-webkit-scrollbar {
width: 0 !important;
}
其中liaddshapes是滚动即将到来的div的名称。
答案 7 :(得分：17)
使用此按钮隐藏滚动条，但保留功能：
.example::-webkit-scrollbar {
display: none;
}
隐藏IE，Edge和Firefox的滚动条
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
答案 8 :(得分：12)
此外，所有浏览器均不使用滚动条滚动。
CSS
.keep-scrolling {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow-y: scroll; /* Add the ability to scroll y axis*/
}
/* Hide scrollbar for Chrome, Safari and Opera */
.keep-scrolling::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.keep-scrolling {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
SCSS
.keep-scrolling {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow-y: scroll; /* Add the ability to scroll y axis*/
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
display: none;
}
}
HTML
<div class="keep-scrolling">
</div>
答案 9 :(得分：9)
<强> HTML：
<div class="parent">
<div class="child">
</div>
</div>
<强> CSS：
.parent{
position: relative;
width: 300px;
height: 150px;
border: 1px solid black;
overflow: hidden;
}
.child {
height: 150px;
width: 318px;
overflow-y: scroll;
}
相应地应用CSS。
检查here （在Internet Explorer和Firefox中测试过）。
答案 10 :(得分：7)
使用隐藏内容的元素隐藏滚动条。
.div{
scrollbar-width: none; /* The most elegant way for Firefox */
}
答案 11 :(得分：7)
使用：
#subparent{
overflow: hidden;
width: 500px;
border: 1px rgba(0,0,0,1.00) solid;
}
#parent{
width: 515px;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
opacity: 10%;
}
#child{
width: 511px;
background-color: rgba(123, 8, 10, 0.42);
}
<body>
<div id="subparent">
<div id="parent">
<div id="child">
<!- code here for scroll ->
</div>
</div>
</div>
</body>
答案 12 :(得分：7)
截至2018年12月11日（Firefox 64及更高版本），该问题的答案确实非常简单，因为Firefox 64+现在实现了CSS Scrollbar Styling spec。
只需使用以下CSS：
scrollbar-width: none;
Firefox 64发行说明链接here。
答案 13 :(得分：6)
使用
function reloadScrollBars() {
document.documentElement.style.overflow = 'auto'; // Firefox, Chrome
document.body.scroll = "yes"; // Internet Explorer only
}
function unloadScrollBars() {
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // Internet Explorer only
}
为要加载或卸载或重新加载滚动条的任何点调用这些函数。我在Chrome中测试它仍然可以在Chrome中滚动，但我不确定其他浏览器。
答案 14 :(得分：5)
我的问题：我不想在html中使用任何样式，我希望我的身体可以直接滚动而不需要任何滚动条，而只能进行垂直滚动，并且可以在任何屏幕尺寸下使用css-grids。
box-sizing 的价值影响填充或边距解决方案，它们与 box-sizing：content-box 一起使用。
我仍然需要“ -moz-scrollbars-none”指令，并且像gdoron和Mr_Green一样，我不得不隐藏滚动条。我尝试使用-moz-transform和-moz-padding-start仅影响Firefox，但是有一些需要大量工作的响应性副作用。
此解决方案适用于具有“显示：网格”样式的html正文内容，并且具有响应能力。
/* hide html and body scroll bar in css-grid context */
html,body{
position: static; /* or relative or fixed ... */
box-sizing: content-box; /* important for hidding scrollbar */
display: grid; /* for css-grid */
/* full screen */
width: 100vw;
min-width: 100vw;
max-width: 100vw;
height: 100vh;
min-height: 100vh;
max-height: 100vh;
margin: 0;
padding: 0;
}
html{
-ms-overflow-style: none; /* IE 10+ */
overflow: -moz-scrollbars-none; /* should hide scroll bar */
}
/* no scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar{
display: none; /* might be enought */
background: transparent;
visibility: hidden;
width: 0px;
}
/* Firefox only workaround */
@-moz-document url-prefix() {
/* Make html with overflow hidden */
html{
overflow: hidden;
}
/* Make body max height auto */
/* set right scroll bar out the screen */
body{
/* enable scrolling content */
max-height: auto;
/* 100vw +15px : trick to set the scroll bar out the screen */
width: calc(100vw + 15px);
min-width: calc(100vw + 15px);
max-width: calc(100vw + 15px);
/* set back the content inside the screen */
padding-right: 15px;
}
}
body{
/* allow vertical scroll */
overflow-y: scroll;
}
答案 15 :(得分：5)
在现代浏览器中，您可以使用wheel event https://developer.mozilla.org/en-US/docs/Web/Events/wheel
// content is the element you want to apply the wheel scroll effect
content.addEventListener('wheel', function(e) {
const step = 100; // how many pixels to scroll
if(e.deltaY > 0 ) // scroll down
content.scrollTop += step;
else //scroll up
content.scrollTop -= step;
});
答案 16 :(得分：4)
以下内容适用于Microsoft，Chrome和Mozilla上的特定div元素：
div.rightsidebar {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar {
width: 0 !important;
}
答案 17 :(得分：4)
如果出于某种原因，您希望使用div，则在内部box-model: border-box中添加填充（如当前接受的答案）将无效。
两种情况下的工作原理是将内部div的宽度增加到100％加上滚动条的宽度（假设外部div为overflow: hidden）。
例如，在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 + ')';
答案 18 :(得分：4)
这就是我如何进行水平滚动，只有CSS，并且适用于bootstrap / col- *等框架。它只需要2个额外的div和设置宽度或最大宽度的父级：
如果您有触摸屏，可以选择文本使其滚动或用手指滚动。
.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
overflow-x:hidden;
margin-bottom:-17px;
overflow-y:hidden;
width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
overflow-x:auto;
width:100%;
padding-bottom:17px;
white-space: nowrap;
cursor:pointer
}
/* the following classes are only here to make the example looks nicer */
.row {width:100%}
.col-xs-4 {width:33%;float:left}
.col-xs-3 {width:25%;float:left}
.bg-gray{background-color:#DDDDDD}
.bg-orange{background-color:#FF9966}
.bg-blue{background-color:#6699FF}
.bg-orange-light{background-color:#FFAA88}
.bg-blue-light{background-color:#88AAFF}<html><body>
<div class="row">
<div class="col-xs-4 bg-orange">Column 1</div>
<div class="col-xs-3 bg-gray">Column 2</div>
<div class="col-xs-4 bg-blue">Column 3</div>
</div>
<div class="row">
<div class="col-xs-4 bg-orange-light">Content 1</div>
<div class="col-xs-3 overflow-x-scroll-no-scrollbar">
<div>
<div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
</div>
</div>
<div class="col-xs-4 bg-blue-light">Content 3</div>
</div>
</body></html>
懒人的简短版本：
.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
overflow-x:hidden;
margin-bottom:-17px;
overflow-y:hidden;
width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
overflow-x:auto;
width:100%;
padding-bottom:17px;
white-space: nowrap;
cursor:pointer
}
/* the following classes are only here to make the example looks nicer */
.parent-style {width:100px;background-color:#FF9966}<div class="parent-style overflow-x-scroll-no-scrollbar">
<div>
<div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
</div>
</div>
答案 19 :(得分：3)
我碰巧在我的项目中尝试了上述解决方案，由于某种原因，由于div定位，我无法隐藏滚动条。因此，我决定通过引入一个表面覆盖它的div来隐藏滚动条。以下示例适用于水平滚动条：
public class EnemySetAlpha : MonoBehaviour {
public Material enemyMaterial;
public float fadeSpeed = 0.1f;
// Value used to know when the enemy has been spawned
private float spawnTime ;
// Use this for initialization
void Start () {
// Because `Material` is a class,
// The following line does not create a copy of the material
// But creates a reference (points to) the material of the renderer
enemyMaterial = GetComponent<SkinnedMeshRenderer> ().material;
spawnTime = Time.time ;
}
// Update is called once per frame
void Update () {
// Set the alpha according to the current time and the time the object has spawned
SetAlpha( (Time.time - spawnTime) * fadeSpeed );
}
void SetAlpha(float alpha)
{
// Here you assign a color to the referenced material,
// changing the color of your renderer
Color color = enemyMaterial.color;
color.a = Mathf.Clamp( alpha, 0, 1 );
enemyMaterial.color = color;
}
}
对应的CSS如下：
<div id="container">
<div id="content">
My content that could overflow horizontally
</div>
<div id="scroll-cover">
</div>
</div>
答案 20 :(得分：3)
这对我有用：
scroll-content {
overflow-x: hidden;
overflow-y: scroll;
}
scroll-content::-webkit-scrollbar{
width: 0;
}
答案 21 :(得分：3)
perfect-scrollbar插件似乎是要走的路，请参阅：https://github.com/noraesae/perfect-scrollbar
有关滚动条问题的详细记录和完整的基于JS的解决方案。
答案 22 :(得分：3)
这是一个divitis-esque解决方案，但它应该适用于所有浏览器...
标记如下，并且需要在相对定位的内部（并且应该设置其宽度，例如400px）：
<div class="hide-scrollbar">
<div class="scrollbar">
<div class="scrollbar-inner">
</div>
</div>
</div>
CSS：
.hide-scrollbar {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.scrollbar {
overflow-y: scroll;
position: absolute;
top: 0;
left: 0;
right: -50px;
bottom: 0;
}
.scrollbar-inner {
width: 400px;
}
答案 23 :(得分：3)
这将在身体：
<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>
这就是CSS：
#maincontainer
{
background: grey;
width: 101%;
height: 101%;
overflow: auto;
position: fixed;
}
#child
{
background: white;
height:500px;
}
答案 24 :(得分：2)
这对我的跨浏览器有效，但是，这不会在移动浏览器中隐藏本机滚动条
.hide-native-scrollbar {
scrollbar-width: none; /* Firefox 64 */
-ms-overflow-style: none; /* IE 11 */
&::-webkit-scrollbar { /** Webkit */
display: none;
}
}
答案 25 :(得分：2)
另一种hacky方法是class WC_Product_Moto extends WC_Product {
protected $product_type = 'moto';
public function get_type(){
return 'moto';
}
}
然后手动滚动元素：
overflow-y: hidden有关于如何在deepmikoto's博客中检测和处理function detectMouseWheelDirection( e ) {
var delta = null, direction = false;
if ( !e ) { // if the event is not provided, we get it from the window object
e = window.event;
}
if ( e.wheelDelta ) { // will work in most cases
delta = e.wheelDelta / 60;
} else if ( e.detail ) { // fallback for Firefox
delta = -e.detail / 2;
}
if ( delta !== null ) {
direction = delta > 0 ? -200 : 200;
}
return direction;
}
if ( element.addEventListener ) {
element.addEventListener( 'DOMMouseScroll', function( e ) {
element.scrollBy({
top: detectMouseWheelDirection( e ),
left: 0,
behavior: 'smooth'
});
});
}
事件的精彩文章。
这可能对您有用，但它绝对不是一个优雅的解决方案。
答案 26 :(得分：1)
您可以使用下面的代码隐藏滚动条，但仍可以滚动：
.element::-webkit-scrollbar {
width: 0 !important
}
答案 27 :(得分：1)
只需编写此代码：
::-webkit-scrollbar {
width: 0px;
}
或
::-webkit-scrollbar {
display: none;
}
答案 28 :(得分：1)
Another simple working fiddle：
#maincontainer {
background: orange;
width: 200px;
height: 200px;
overflow: hidden;
}
#childcontainer {
background: yellow;
position: relative;
width: 200px;
height: 200px;
top: 20px;
left: 20px;
overflow: auto;
}
隐藏在父容器上的溢出，以及子容器上的溢出自动。简单。
答案 29 :(得分：1)
这个棘手的解决方案即使在旧版IE网络浏览器上也可以使用
这是[垂直滚动条]
的解决方法<html>
<head>
<style>
html,
body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: hidden;
height: 100%;
margin: 0;
}
</style>
</head>
<body id="body" style="overflow:auto;height:100%" onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'">
<!--your stuff here-->
</body>
</html>
只需尝试：jsfiddle
答案 30 :(得分：1)
我只想共享一个合并的代码段，以隐藏开发时使用的滚动条。它是在互联网上找到的对我有用的几段代码的集合：
.container {
overflow-x: scroll; /* for horiz. scroll, otherwise overflow-y: scroll; */
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
scrollbar-width: none;
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
希望您发现这很有用：*
答案 31 :(得分：0)
隐藏水平和垂直滚动条。
HTML
<div id="container1">
<div id="container2">
<pre>
Select from left and drag to right to scroll this very long sentence. This should not show scroll bar at bottom or on the side. Keep scrolling .......... ............ .......... ........... This Fiddle demonstrates that scrollbar can be hidden. ..... ..... ..... .....
</pre>
</div>
<div>
CSS
* {
margin:0;
}
#container1 {
height: 50px;
width: 100%;
overflow: hidden;
position: relative;
}
#container2 {
position: absolute;
top: 0px;
bottom: -15px;
left: 0px;
right: -15px;
overflow: auto;
}
答案 32 :(得分：0)
以下SASS样式应可使滚动条在大多数浏览器上透明（不支持Firefox）：
<AsyncSelect
cacheOptions
loadOptions={this.loadCustomers}
onInputChange={this.handleCustomersInputChange}
/>
答案 33 :(得分：0)
我遇到了这个问题，修复起来非常简单。
获取两个容器。内部将是您的可滚动容器，外部显然将容纳内部：
#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }
它非常简单，适用于任何浏览器。
答案 34 :(得分：0)
只需将子宽度的宽度设置为100％，填充为15px，overflow-x进行滚动和溢出：隐藏为父级和任何宽度，它适用于所有主流浏览器，包括IE边缘，IE8及更低版本除外。
答案 35 :(得分：0)
我知道这是一个非常古老的问题，但这里有一个很酷的跨浏览器解决方案，仅使用 HTML 和 CSS。
HTML：
<div class="barrel">
<div class="clipper">
<p class="clippercontent">Lorem</p>
</div>
<div id='navcontainer'>
<p class="navcontent" >I want to be able to scroll through the whole page, but without the scrollbar being shown. Is there a way I can remove the scrollbar while still being able to scroll the whole page? With just CSS or HTML, please.
</p>
</div>
</div>
原则：#navcontainer 将容纳我们的 .navcontent，并且会有滚动条。 .barrel 将隐藏 #navcontainer 的滚动条。
CSS：
.barrel{
border: 0.8px solid #110011;
position: relative;
overflow: hidden;
}
.barrel #navcontainer{
overflow: scroll; overflow-y: hidden;
position: absolute;/* absolute positioned contents will not affect their parents */
top: 0; left: 0; right: 0;
white-space: nowrap;
}
/* style .clipper and .clippercontent, as a structural-image of #navcontainer and .navcontent respectively This will help .barrel have the same height as the #navcontainer */
.barrel .clipper{
overflow: hidden;
width: 0px;
white-space: nowrap;
}
.navcontent, .clippercontent{
padding: 3px 1px;
}
答案 36 :(得分：-1)
2019年： 以上作品的答案。
您不需要经常设置背景，但是有时会出现滚动条高度错误的错误。您可以按照以下说明进行修复
height:0px; /* fixes issue with extra space underneath scrollbar */
width: 0px;
答案 37 :(得分：-1)
const promises = subscriptions.map(subscription => axios.get(`SOME_URL/${subscription}`, config1))
Promise.allSettled(promises).then((values) => {
...
})
除“溢出”外，您编写的所有内容均正确。 适用于Chrome和其他浏览器的webkit
let promises = [];
for(let i = 0; i < subscriptions.length; i++) {
promises.push(axios.get(`SOME_URL/${subscription}`, config1));
}
Promise.allSettled(promises).then((values) => {
...
})
或
.className::-webkit-scrollbar{
display: none;
}
对于Firefox和Edge
overflow-y: scroll;
或
overflow-y: auto;
答案 38 :(得分：-5)
添加
overflow: -moz-scrollbars-none;
为我工作。