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

在Google Chrome中,它是:

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

但Mozilla Firefox和Internet Explorer似乎不是这样工作的。

我也在CSS中尝试过:

overflow: hidden;

这确实隐藏了滚动条,但我不能再滚动了。

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

请只使用CSS或HTML。


当前回答

我知道这是一个非常古老的问题,但这里有一个仅使用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;
}

其他回答

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

这个棘手的解决方案甚至可以在旧的Internet Explorer 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

Use:

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>

这是我如何做水平滚动;只有CSS,并且可以很好地与Bootstrap/col-*等框架配合使用。它只需要两个额外的div和设置了width或max width的父级:

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

.overflow-x-scroll-no滚动条{溢出:隐藏;}.overflow-x-scroll-no-scrollbar div{overflow-x:隐藏;边距底部:-17px;overflow-y:隐藏;宽度:100%;}.overflow-x-scroll-no-scrollbar div*{溢出-x:自动;宽度:100%;填充底部:17px;空白:nowrap;光标:指针}/*下面的类只是为了使示例看起来更好*/.行{宽度:100%}.col-xs-4列{宽度:33%;浮动:左侧}.col-xs-3列{宽度:25%;浮动:左侧}.bg灰色{背景色:#DDDDD}.bg橙色{背景色:#FF9966}.bg蓝色{背景色:#6699FF}.bg橙色灯{背景色:#FFAA88}.bg蓝光{背景色:#88AAFF}<html><body><div class=“row”><div class=“col-xs-4 bg orange”>第1列</div>第2列</div><div class=“col-xs-4 bg blue”>第3列</div></div><div class=“row”><div class=“col-xs-4 bg橙色灯光”>内容1</div><div class=“col-xs-3溢出-x-scroll-no-scrollbar”><div><div>这个内容对于容器来说太长了,所以它需要隐藏,但不需要滚动条就可以滚动</div></div><div class=“col-xs-4 bg蓝光”>内容3</div></div></body></html>

懒人版:

.overflow-x-scroll-no滚动条{溢出:隐藏;}.overflow-x-scroll-no-scrollbar div{overflow-x:隐藏;边距底部:-17px;overflow-y:隐藏;宽度:100%;}.overflow-x-scroll-no-scrollbar div*{溢出-x:自动;宽度:100%;填充底部:17px;空白:nowrap;光标:指针}/*下面的类只是为了使示例看起来更好*/.父样式{宽度:100px;背景色:#FF9966}<div class=“父样式溢出-x-scroll-no-scrollbar”><div><div>这个内容对于容器来说太长了,所以它需要隐藏,但不需要滚动条就可以滚动</div></div>

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

#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

信息:

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