隐藏滚动条，但同时仍然能够滚动

用途：

<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;作为每msdn。

没有对应的Firefox。虽然有一个jQuery插件可以实现这一点，http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

只是一个工作正常的测试。

#parent{width: 100%;height: 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 */}

工作小提琴

JavaScript：

由于滚动条宽度在不同的浏览器中有所不同，因此最好使用JavaScript处理。如果您执行Element.offsetWidth - Element.clientWidth，则会显示确切的滚动条宽度。

JavaScript工作小提琴

或

使用Position: absolute，

#parent{width: 100%;height: 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;}

工作小提琴

JavaScript工作小提琴

信息：

基于这个答案，我创建了一个简单的滚动插件。

另一个简单的工作小提琴：

#maincontainer {background: orange;width: 200px;height: 200px;overflow: hidden;}
#childcontainer {background: yellow;position: relative;width: 200px;height: 200px;top: 20px;left: 20px;overflow: auto;}

父容器上隐藏溢出，子容器上自动溢出。很简单。

这将是在身体：

<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;}

我遇到了这个问题，而且解决起来非常简单。

获得两个容器。内部将是您的可滚动容器，外部显然将容纳内部：

#inner_container { width: 102%; overflow: auto; }#outer_container { overflow: hidden }

它非常简单，可以与任何浏览器一起使用。

使用

function reloadScrollBars() {document.documentElement.style.overflow = 'auto';  // Firefox, Chromedocument.body.scroll = "yes"; // Internet Explorer only}
function unloadScrollBars() {document.documentElement.style.overflow = 'hidden';  // firefox, chromedocument.body.scroll = "no"; // Internet Explorer only}

调用这些函数来加载、卸载或重新加载滚动条。它在Chrome仍然是可滚动的，正如我在Chrome测试的那样，但我不确定其他浏览器。

只需使用以下三行，您的问题将得到解决：

#liaddshapes::-webkit-scrollbar {width: 0 !important;}

其中liadd形状是div的名称，其中滚动即将到来。

这个答案不包含代码，所以这是页面的解决方案：

根据页面，这种方法不需要提前知道滚动条的宽度才能工作，并且该解决方案也适用于所有浏览器，可以看到这里。

好消息是，您不需要使用填充或宽度差异来隐藏滚动条。

这也是缩放安全的。填充/宽度解决方案在缩放到最小时显示滚动条。

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 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 in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristiquealiquam 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, molestievel 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>

超文本标记语言：

<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。

点击这里查看（在Internet Explorer和Firefox中测试）。

用途：

css

#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>

在WebKit中很容易，具有可选的样式：

html {overflow: scroll;overflow-x: hidden;}::-webkit-scrollbar {width: 0;  /* Remove scrollbar space */background: transparent;  /* Optional: just make scrollbar invisible */}/* Optional: show position indicator in red */::-webkit-scrollbar-thumb {background: #FF0000;}

只需将子节点的宽度设置为100%，填充为15像素，滚动为0，父节点为1，以及您想要的任何宽度。

它适用于所有主要浏览器，包括Internet Explorer和Edge，但Internet Explorer 8及更低版本除外。

如果由于某种原因您想使用box-model: border-box，则将填充添加到内部div（如当前接受的答案）将不起作用。

在这两种情况下都有效的是将内部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 + ')';

这对我来说适用于简单的CSS属性：

.container {-ms-overflow-style: none;  /* Internet Explorer 10+ */scrollbar-width: none;  /* Firefox */}.container::-webkit-scrollbar {display: none;  /* Safari and Chrome */}

对于旧版本的Firefox，请使用：overflow: -moz-scrollbars-none;

这是一个独立的解决方案，但不适用于所有浏览器…

标记如下，需要在具有相对定位的内部（其宽度应设置，例如400像素）：

<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;}

这就是我对水平滚动的处理方式；只有CSS并且适用于Bootstrap/col-*等框架。它只需要两个额外的div和带有width或max-width集的父级：

如果您有触摸屏，您可以选择文本以使其滚动或用手指滚动。

.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>

在现代浏览器上，您可以使用#0：

// Content is the element you want to apply the wheel scroll effect tocontent.addEventListener('wheel', function(e) {const step = 100; // How many pixels to scroll
if (e.deltaY > 0) // Scroll downcontent.scrollTop += step;else // Scroll upcontent.scrollTop -= step;});

我碰巧在我的项目中尝试了上述解决方案，由于某种原因，由于div定位，我无法隐藏滚动条。因此，我决定通过引入一个浅层覆盖它的div来隐藏滚动条。下面的示例是水平滚动条：

<div id="container"><div id="content">My content that could overflow horizontally</div><div id="scroll-cover">&nbsp;</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*/}

更新：

Firefox现在支持使用CSS隐藏滚动条，因此现在涵盖了所有主要浏览器（Chrome，Firefox，Internet Explorer，Safari等）。

只需将以下CSS应用于要删除滚动条的元素：

.container {overflow-y: scroll;scrollbar-width: none; /* Firefox */-ms-overflow-style: none;  /* Internet Explorer 10+ */}.container::-webkit-scrollbar { /* WebKit */width: 0;height: 0;}

这是我目前所知道的最少的跨浏览器解决方案。查看演示。

原始答案：

这是另一种还没有提到的方式。它非常简单，只涉及两个div和CSS。不需要JavaScript或专有的CSS，它适用于所有浏览器。它也不需要显式设置容器的宽度，从而使其流畅。

此方法使用负边距将滚动条移出父滚动条，然后使用相同数量的填充将内容推回其原始位置。该技术适用于垂直、水平和双向滚动。

演示：

• 垂直
• 水平
• 两个方向

垂直版本的示例代码：

超文本标记语言：

<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;}

另一种方法是overflow-y: hidden，然后手动滚动元素，如下所示：

function detectMouseWheelDirection(e) {var delta = null, direction = false;if (!e) { // If the event is not provided, we get it from the window objecte = window.event;}if (e.wheelDelta) { // Will work in most casesdelta = e.wheelDelta / 60;} else if (e.detail) { // Fallback for Firefoxdelta = -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'});});}

有一篇关于如何检测和处理Deepmikoto的博客中的onmousewheel事件的好文章。这可能对你有用，但绝对不是一个优雅的解决方案。

我的问题：我不希望我的超文本标记语言内容有任何样式。我希望我的主体可以直接滚动，没有任何滚动条，只有垂直滚动，使用css网格处理任何屏幕尺寸。

箱体施胶值影响填充或边距解决方案，它们适用于box-大小：内容-框。

我仍然需要“-moz-scrollbars-no”指令，并且像gdoron和Mr_Green一样，我必须隐藏滚动条。我尝试了-moz-transform和-moz-padding-start，只影响Firefox，但有响应性副作用需要太多工作。

此解决方案适用于具有“显示：网格”样式的超文本标记语言正文内容，并且具有响应性。

/* 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;  /* Internet Explorer 10+ */overflow: -moz-scrollbars-none; /* Should hide the scroll bar */}
/* No scroll bar for Safari and Chrome */html::-webkit-scrollbar,body::-webkit-scrollbar {display: none; /* Might be enough */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;}

截至2018年12月11日（Firefox 64及以上版本），这个问题的答案非常简单，因为Firefox 64+现在实现了CSS滚动条样式规范。

只需使用以下CSS：

scrollbar-width: none;

Firefox 64发行说明链接这里。

我只是想分享一个用于隐藏我在开发时使用的滚动条的组合片段。它是在Internet上找到的几个适合我的片段的集合：

.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 */}

以下内容适用于我在Microsoft，Chrome和Mozilla上的特定div元素：

div.rightsidebar {overflow-y: auto;scrollbar-width: none;-ms-overflow-style: none;}div.rightsidebar::-webkit-scrollbar {width: 0 !important;}

这对我有用：

scroll-content {overflow-x: hidden;overflow-y: scroll;}
scroll-content::-webkit-scrollbar {width: 0;}

这适用于我的跨浏览器。然而，这并没有隐藏移动浏览器上的本机滚动条。

在SCSS

.hide-native-scrollbar {scrollbar-width: none; /* Firefox 64 */-ms-overflow-style: none; /* Internet Explorer 11 */&::-webkit-scrollbar { /** WebKit */display: none;}}

在css

.hide-native-scrollbar {scrollbar-width: none; /* Firefox 64 */-ms-overflow-style: none; /* Internet Explorer 11 */}.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */display: none;}

隐藏水平和垂直滚动条。

在这里看到小提琴

超文本标记语言

 <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;}

您可以使用下面的代码来隐藏滚动条，但同时仍然能够滚动：

.element::-webkit-scrollbar {width: 0 !important}

以下SASS样式应该使您的滚动条在大多数浏览器上透明（不支持Firefox）：

.hide-scrollbar {scrollbar-width: thin;scrollbar-color: transparent transparent;
&::-webkit-scrollbar {width: 1px;}
&::-webkit-scrollbar-track {background: transparent;}
&::-webkit-scrollbar-thumb {background-color: transparent;}}

这个棘手的解决方案甚至可以在旧的IE Web浏览器上运行

这是一个解决方法[垂直滚动条]

<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

要隐藏内容溢出的元素的滚动条，请使用。

.div{
scrollbar-width: none; /* The most elegant way for Firefox */
}

使用它来隐藏滚动条但保留功能：

.example::-webkit-scrollbar {display: none;}

隐藏IE、Edge和Firefox的滚动条

.example {-ms-overflow-style: none;  /* IE and Edge */scrollbar-width: none;  /* Firefox */}

此外，滚动没有滚动条为所有浏览器。

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;}}     

超文本标记语言

<div class="keep-scrolling"></div>

.className::-webkit-scrollbar{display: none;}

你写的一切都是正确的，除了“溢出”。Chrome和其他浏览器的webkit

overflow-y: scroll;

或

overflow-y: auto;

对于Firefox和Edge

scrollbar-width: none;

或

scrollbar-width: thin;

scrollbar-width: none;

为我工作。

只需编写此代码：

::-webkit-scrollbar {width: 0px;}

或

::-webkit-scrollbar {display: none;}

我知道这是一个非常古老的问题，但这里有一个很酷的跨浏览器解决方案，仅使用超文本标记语言和CSS。

超文本标记语言：

  <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>

原理：#导航容器将容纳我们的.导航内容，并具有滚动条。.桶将隐藏#导航容器的滚动条。

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;}

.your-overflow-scroll-class::-webkit-scrollbar {...width: 0.5rem; //only hide the vertical scrollbarheight: 0px; //only hide the horizontal scrollbar}

这招对我管用

div {-ms-overflow-style: none; /* Edge, Internet Explorer */scrollbar-width: none; /* Firefox */overflow-y: scroll;}
// hides scrollbars while allowing to scrolldiv::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera */}

我添加了这个，它对我有用

-ms-overflow-style: none;  /* IE and Edge */scrollbar-width: none;  /* Firefox */

参考：https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

只需将其添加到您的css文件

 "&::-webkit-scrollbar": {display: "none",width: 0},"-ms-oveflow-style": "none" /*IE and Edge*/,"scrollbar-width": "none" /*Firefox*/,

这篇文章已经被很多人回答了，但我觉得它的解决方案可以简单得多。

/* Hide scrollbar for Chrome, Safari and Opera */
.container::-webkit-scrollbar {display: none;}
/* Hide scrollbar for IE, Edge and Firefox */
.container {-ms-overflow-style: none;  /* IE and Edge */scrollbar-width: none;  /* Firefox */}}

Note:Above方法将只是remove the visibility of scrollbar，但它仍然是可操作的。如果你想remove scroll functionality ，那么你可以使用下面的一个

container {overflow-y: hidden; /* Hide vertical scrollbar */overflow-x: hidden; /* Hide horizontal scrollbar */}