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

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

好的是，您不必使用填充或宽度差异来隐藏滚动条。

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

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>

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

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

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

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

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

另一种黑客方法是执行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事件的精彩文章。这可能对你有用，但绝对不是一个优雅的解决方案。

这是我如何做水平滚动；只有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>