隐藏滚动条，但仍可以滚动

我希望能够滚动整个页面，但不显示滚动条。

在Google Chrome浏览器中是：

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

但是Mozilla Firefox和Internet Explorer似乎无法正常工作。

我也在CSS中进行了尝试：

overflow: hidden;

这确实隐藏了滚动条，但我无法再滚动。

有没有一种方法可以删除滚动条，同时仍然可以滚动整个页面？

仅使用CSS还是请使用HTML。

webkit-scrollbar在其他浏览器上不起作用？

#1 楼

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

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

Working Fiddle
JavaScript Working Fiddle
信息：
基于此答案，我创建了一个简单的滚动插件。

在您的上一个“工作提琴”中，我看到了太多！重要的信息，所以我将它们全部删除：jsfiddle.net/5GCsJ/954

– Roko C. Buljan
2014年5月6日19:23

当内容的宽度设置为auto时，此解决方案不起作用。一直向右滚动时，部分内容仍然不可见。这是为什么？有什么办法吗？在这里检查问题：jsfiddle.net/50fam5g9/7注意：在我的情况下，无法预先知道内容的宽度，因此必须将其设置为auto。

–发芽编码器
2014-09-27 19:38

这种方法不能涵盖所有浏览器，并且将非常适合您在开发过程中使用的浏览器版本。

– Itsik Avidan
14-10-22在12:23

水平滚动条呢？你怎么藏起来

–www139
2015年11月9日在23:41

为什么要复杂化并计算滚动条宽度？只需设置框大小即可：border-box;宽度：calc（100％+ 50px）;和相同的填充值。没有浏览器具有50px的滚动条宽度/高度，因此它应该简单地覆盖所有...

– Robert Koritnik
17年7月7日在8:54

#2 楼

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

在cordova应用程序中尝试过，效果很好。必须将overflow：scroll应用于元素。

– Kishor Pawar
15年11月30日在6:52

在Firefox上不起作用，很明显，因为这纯粹是说webkit。谢谢：）

–佐海尔
17年1月17日在7:22

由于它们是铬，因此在电子应用程序中表现出色，符合预期。 +1谢谢：D

–洛可可
17年4月30日在6:58

从iOS8开始，与-webkit-overflow-scrolling结合使用时，此功能无效：

–aleclarson
17年5月5日在18:09

它适用于chrome。但不适用于mozilla firefox。

–romal tandel
18-2-28在4:11

#3 楼

这对我来说具有简单的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;

对我来说，溢出：-moz-scrollbars-none在Firebox中隐藏滚动条，但也禁用滚动。您能提供一个适合您的演示吗？

– Chipit24
16年8月26日在21:20

不幸的是，对于最新的Firefox版本，删除了-moz-scrollbars-none属性：developer.mozilla.org/en-US/docs/Web/CSS/overflow

–克里斯托·埃夫蒂莫夫（Hristo Eftimov）
16 Dec 14'9:01

从iOS8开始，与-webkit-overflow-scrolling结合使用时，此功能无效：

–aleclarson
17年5月5日在18:09

对于过时的Firefox -moz-scrollbars-none，您可以使用@ -moz-document url-prefix（）{.container {overflow：hidden; }。参见stackoverflow.com/questions/952861/…。

–马丁·兹迪拉
17年6月22日在8:30

我已使用Firefox的最新支持更新了答案：)

–克里斯托·埃夫蒂莫夫（Hristo Eftimov）
19年4月1日在6:47

#4 楼

更新：

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

我目前知道的hacky跨浏览器解决方案。查看演示。

原始答案：

这里还没有提到另一种方法。它非常简单，仅涉及两个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;
}

我知道这是一个老问题的新答案，但是现在应该是公认的答案。好东西的人。

–矢量
18 Mar 15'在22:22

毫无疑问，这绝对是最好的答案。现在，如何修改它以隐藏水平滚动条？

–CeeMoney
18年6月17日在4:53

@CeeMoney我添加了一个水平演示。对于固定宽度的内容元素（例如图像），它应该只能工作，但对于文本，则需要禁用换行。

–里希德
18年6月18日在10:36

@Richrd-非常感谢您的演示-效果很好。不知道为什么我们都这么难，但这太简单了，我以前没做过，这很愚蠢。

–CeeMoney
18年6月18日在14:07

谢谢@Richrd！我很高兴我滚动到你的答案。如果SO会有一些“强制接受的答案”，我现在肯定会使用它。

–马丁D
19年2月7日，11：30

#5 楼

使用：

<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，请按照MSDN使用：-ms-overflow-style: -ms-autohiding-scrollbar;或-ms-overflow-style: none;。

Firefox没有等效的功能。
尽管有一个jQuery插件可以实现这一目标，
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

ictacademie.info/oussamaelbachiri这个站点@Oussama Dobby使用media ='screen'，然后使用CSS的'::-webkit-scrollbar'属性

– Arpit Singh
13年5月21日在13:24

什么是特定的CSS属性？

–乌萨马·巴基里（Oussama el Bachiri）
13年5月21日在13:25

hacky布局或jquery是替代方案

– Arpit Singh
13年5月21日在13:31

以下内容使我能够在iOS7和iOS8上使用jQuery Mobile 1.4在Cordova中启用本机滚动// CSS ::-webkit-scrollbar {display：none; } .ui-content {-webkit-overflow-scrolling：触摸； } // jQuery Mobile onMobileInit（）$ .mobile.touchOverflowEnabled = true;

–瑞安·威廉姆斯（Ryan Williams）
2014年11月7日6:49

#6 楼

此答案不包括代码，因此这是页面上的解决方案：

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

好处是您不会被迫使用填充或宽度差来隐藏滚动条。

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

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>

这不适用于所有浏览器...仅Webkit浏览器。您正在使用特定于Webkit的选择器:::-webkit-scrollbar {}

– T_Conroy
16-2-8在21:36

在回答问题之前，我已经在所有新的浏览器中对其进行了测试。也是FF。 FF发生了一些变化吗？

– TimoKähkönen
16年2月9日，在2:13

我更新了答案。似乎添加padding-right：150px;解决它。经过FF，Chrome，Safari和Edge的测试。由于右填充较大，因此也可以在低缩放级别下使用。

– TimoKähkönen
16年2月9日在2:35

Edge，IE 11，IE10（可能更低）也支持html {-ms-overflow-style：none;}。在这些浏览器中，无需使用padding-hack。

– TimoKähkönen
16-8-30在11:54

不得不使用@Timo的答案和溢出-y：滚动以获取滚动行为，但必须隐藏（就像Chrome）才能使其在Edge23上运行。

– jojo
16-09-27在20:31

#7 楼

这对我的跨浏览器有效。但是，这不会在移动浏览器中隐藏本机滚动条。

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

嵌套块（{}）是什么意思？如何解释？和＆？也许您的回答很详尽？

– Peter Mortensen
19-11-10在13:51

这是SASS的事情（显然也很少）：css-tricks.com/the-sass-ampersand

– vipatron
19年11月14日在16:32

@PeterMortensen我现在刚刚看到您的评论，＆::-webkit-scrollbar在CSS中成为.hide-native-scrollbar ::-webkit-scrollbar {}

–Murhaf Sousli
19年11月20日在10:16

只做{width：0; height：0;}代表::-webkit-scrollbar而不是显示：iOS则没有。

– adriendenat
19年11月28日在17:02

在FF71中，这会阻止所有滚动。

–基因b。
1月8日1:49

#8 楼

只需使用以下三行，即可解决您的问题：

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

其中liaddshapes是滚动即将到来的div的名称。

告诉我你在小提琴中遇到的问题

– Innodel
2015年4月3日在4:18

简单实用，谢谢！我使用了{display：none}而不是{width：0;}并且也可以

– Santi Nunez
16-11-16在16:46

#9 楼

使用此按钮隐藏滚动条但保留功能：

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

隐藏IE，Edge和Firefox的滚动条

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

#10 楼

以下代码适用于Microsoft，Chrome和Mozilla上的特定div元素：

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

请注意，滚动条宽度（仅适用于FF）被标记为“实验性”

–cimak
19年5月6日在13:34

是@cimak，但是在FF上您可以隐藏它而不会出现任何问题，因此它确实仅用于Chrome。

–梅洛曼
19年5月6日在13:49

#11 楼

此外，所有浏览器均无需滚动条即可滚动。

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>

先生，你是英雄！

– Nick87
11月10日23:29

#12 楼

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。

在此处进行检查
（已在Internet Explorer和Firefox中测试）。

#13 楼

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

只需使用以下CSS：

scrollbar-width: none;

Firefox 64发行说明链接在这里。

很高兴知道！看来浏览器确实在进步，哈哈！

–乌萨马·巴基里（Oussama el Bachiri）
19年1月3日在8:13

#14 楼

使用：
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);
}

HTML

 <body>
    <div id="subparent">
        <div id="parent">
            <div id="child">
                <!- Code here for scroll ->
            </div>
        </div>
     </div>
</body>

不知道为什么要低估这个价格，但是我只是对它进行了投票，因为它确实朝着正确的方向发展，其他解决方案在我的情况下并不是很好。溢出-x：隐藏; +溢出-y：滚动;诀窍是什么，以及> 100％的宽度（在我的情况下为110％的效果很好）。

– dAngelov
15年4月26日在18:23

与最不赞成的解决方案是一回事：试图隐藏滚动条。这并不理想，因为它随浏览器的不同而不同

–mwm
18年1月29日在17:48

#15 楼

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

.div{

  scrollbar-width: none; /* The most elegant way for Firefox */

}

除了您提到的FF之外，几乎没有其他支持，这对OP的要求来说太少了。检查caniuse.com/#feat=mdn-css_properties_scrollbar-width

–阿德里安
5月7日13:00

@Adrien好吧，原始问题表明，他们为其他浏览器提供了解决方案。（但是Mozilla Firefox和Internet Explorer似乎无法正常工作），他说，这就是我提供Firefox解决方案的原因。

– Alvin Moyo
5月19日0:03

我发现与等效项结合使用时效果很好：div ::-webkit-scrollbar {display：none; }用于Webkit / Chrome。

– Sean Halls
5月25日20:22

#16 楼

使用

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中滚动，但是我不确定其他浏览器。

#17 楼

在现代浏览器上，您可以使用wheel event：

// Content is the element you want to apply the wheel scroll effect to
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;
});

这是我一直在寻找的答案。谢谢。我使用了溢出：隐藏的代码和该代码，使mat-card-content（当然是角度5）可以滚动，这些解决了我的问题。注意：我使用e.deltaY作为步骤，它的工作方式与正常滚动一样，因此我认为对于正常滚动但隐藏了滚动条的情况，这是最佳匹配。

– imans77
19-2-5在15:24

此处链接的页面警告此方法不合适？

– jnnnnn
19年5月7日，下午1:28

#18 楼

这对我有用：

scroll-content {
    overflow-x: hidden;
    overflow-y: scroll;
}

scroll-content::-webkit-scrollbar {
    width: 0;
}

#19 楼

这就是我水平滚动的方式。仅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>

谢谢，我尝试过，效果很好。一件事是，最好将margin-bottom-bottom更改为padding-bottom，但值相同。在底部的元素空间下方不会吃光。它可以防止重叠。

– haxpor
17 Mar 28 '17在3:16

@haxpor margin-bottom为负，我认为不能将其更改为padding-bottom，不能处理负值

–吉恩
17年3月28日在16:35

#20 楼

我的问题：我的HTML内容不需要任何样式。我希望我的身体可以直接滚动而不需要任何滚动条，而只能是垂直滚动，并且可以使用CSS网格来适应任何屏幕尺寸。：content-box。

我仍然需要“ -moz-scrollbars-none”指令，并且像gdoron和Mr_Green一样，我不得不隐藏滚动条。我尝试使用-moz-transform和-moz-padding-start来仅影响Firefox，但是有一些需要大量工作的响应性副作用。

该解决方案适用于具有“ display：grid”样式的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;  /* 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;
}

#21 楼

如果出于某种原因要使用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 + ')';

#22 楼

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

#23 楼

我碰巧在项目中尝试上述解决方案，由于某种原因，由于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*/
}

#24 楼

这将是正文：

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

#25 楼

这是一种适用于divitis的解决方案，尽管如此，该解决方案仍应适用于所有浏览器...

标记如下，并且必须位于相对位置的内部（并且应设置其宽度，例如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;
}

#26 楼

您可以使用下面的代码隐藏滚动条，但仍可以滚动：

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

#27 楼

另一种骇人听闻的方法是执行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 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'
    });
  });
}

deepmikoto的博客中有一篇很棒的文章，介绍如何检测和处理onmousewheel事件。
这可能对您有用，但绝对不是一个优雅的解决方案。

#28 楼

我只想共享一个合并的代码段，以隐藏开发时使用的滚动条。它是在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 */
}

#29 楼

另一个简单的工作提琴：

#maincontainer {
    background: orange;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

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

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

这不会隐藏滚动条，它只是将滚动条的“ left”值推出视线。

–robertmiles3
2014年8月1日14:42

@ robertmiles3是不是同一回事？隐藏而无法查看？

–布莱恩·威利斯（Bryan Willis）
15年6月28日在16:55

@ robertmiles3上面选定的答案从右起执行相同的操作。在FIrefox决定允许CSS再次隐藏滚动条之前，似乎所有解决方案都是很棘手的。 blogs.msdn.com/b/kurlak/archive/2013/11/03/…

–geoyws
15年6月29日在1:46

我必须同意。这是已接受答案提出的类似解决方案。如果有效，则可以。赞成

– JSON
17年11月21日在17:09

#30 楼

即使在旧版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

编程黑洞网

隐藏滚动条，但仍可以滚动

评论

#1 楼

评论

#2 楼

评论

#3 楼

评论

#4 楼

评论

#5 楼

评论

#6 楼

评论

#7 楼

评论

#8 楼

评论

#9 楼

#10 楼

评论

#11 楼

评论

#12 楼

#13 楼

评论

#14 楼

评论

#15 楼

评论

#16 楼

#17 楼

评论

#18 楼

#19 楼

评论

#20 楼

#21 楼

#22 楼

#23 楼

#24 楼

#25 楼

#26 楼

#27 楼

#28 楼

#29 楼

评论

#30 楼