隐藏水平和垂直滚动条。

请在此处查看Fiddle

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

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

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

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

父容器上隐藏溢出，子容器上自动溢出。易于理解的

只是一个测试，效果很好。

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

工作Fiddle

JavaScript：

由于不同浏览器的滚动条宽度不同，最好使用JavaScript处理。如果执行Element.offsetWidth-Element.clientWidth，将显示精确的滚动条宽度。

JavaScript工作Fiddle

Or

使用位置：绝对，

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

工作Fiddle

JavaScript工作Fiddle

信息：

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

我的问题是：我不想在HTML内容中使用任何样式。我希望我的身体可以直接滚动，没有任何滚动条，只有一个垂直滚动，可以使用CSS网格来适应任何屏幕大小。

框大小调整值影响填充或边距解决方案，它们与框大小调整一起工作：内容框。

我仍然需要“-moz scrollbars none”指令，像gdoron和Mr_Green一样，我必须隐藏滚动条。我尝试了-moz转换和-moz填充启动，只影响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;
}

我碰巧在我的项目中尝试了上述解决方案，由于某些原因，由于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修复程序：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>