html

Question

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

在谷歌浏览器中它是：

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

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

我也在 CSS 中试过这个：

overflow: hidden;

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

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

请仅使用 CSS 或 HTML。

score 961 · Accepted Answer

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

#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 工作小提琴

信息：

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

score 529 · Accepted Answer

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

score 522 · Accepted Answer

这适用于我的简单 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;

score 497 · Accepted Answer

更新：

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，它适用于所有浏览器。它也不需要明确设置容器的宽度，从而使其流畅。

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

演示：

垂直版本的示例代码：

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

score 94 · Accepted Answer

利用：

<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

score 46 · Accepted Answer

此外，适用于所有浏览器的无滚动条滚动。

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>

score 33 · Accepted Answer

这个答案不包括代码，所以这里是page的解决方案：

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

好消息是您不必被迫使用填充或宽度差异来隐藏滚动条。

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

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>

score 30 · Accepted Answer

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

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

隐藏 IE、Edge 和 Firefox 的滚动条

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

score 28 · Accepted Answer

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

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

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

score 28 · Accepted Answer

这适用于我的跨浏览器。但是，这不会隐藏移动浏览器上的本机滚动条。

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

score 12 · Accepted Answer

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

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

score 11 · Accepted Answer

11

  scrollbar-width: none;

为我工作

于 2020-12-24T05:46:59.020 回答

score 10 · Accepted Answer

只需编写以下代码：

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

或者

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

score 10 · Accepted Answer

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

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

overflow-y: scroll;

或者

overflow-y: auto;

对于 Firefox 和 Edge

scrollbar-width: none;

或者

scrollbar-width: thin;

score 9 · Accepted Answer

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 中测试）。

score 9 · Accepted Answer

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

只需使用以下 CSS：

scrollbar-width: none;

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

score 9 · Accepted Answer

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

.div{

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

}

score 7 · Accepted Answer

利用：

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>

score 7 · Accepted Answer

在现代浏览器上，您可以使用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;
});

score 6 · Accepted Answer

利用

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

score 6 · Accepted Answer

这对我有用：

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

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

score 5 · Accepted Answer

这就是我为水平滚动做的方式；只有 CSS 并且适用于 Bootstrap / col-* 等框架。它只需要两个额外div的 s 和带有widthormax-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>

score 5 · Accepted Answer

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

box-sizing值影响填充或边距解决方案，它们与box-sizing:content-box一起使用。

我仍然需要“-moz-scrollbars-none”指令，并且像 gdoron 和 Mr_Green 一样，我不得不隐藏滚动条。我试过-moz-transformand -moz-padding-start，只影响 Firefox，但是响应式的副作用需要太多的工作。

此解决方案适用于具有“显示：网格”样式的 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;
}

score 5 · Accepted Answer

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

score 4 · Accepted Answer

如果由于某种div原因您想使用box-model: border-box.

在这两种情况下起作用的是将内部的宽度div增加到 100% 加上滚动条的宽度（假设overflow: hidden在外部 div 上）。

例如，在 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 + ')';

score 3 · Accepted Answer

这将在正文中：

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

score 3 · Accepted Answer

这是一个 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;
}

score 3 · Accepted Answer

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

score 3 · Accepted Answer

我只是想分享一个组合片段来隐藏我在开发时使用的滚动条。它是在 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 */
}

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

Another simple working fiddle:

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

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

Overflow hidden on the parent container, and overflow auto on the child container. Simple.

score 1 · Accepted Answer

隐藏水平和垂直滚动条。

在这里看小提琴

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

score 1 · Accepted Answer

这个棘手的解决方案甚至适用于旧的 IE 网络浏览器

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

<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

score 1 · Accepted Answer

我知道这是一个非常古老的问题，但这是一个很酷的跨浏览器解决方案，只使用 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;
}

score 0 · Accepted Answer

只需将孩子的宽度设置为 100%，填充为 15 像素，overflow-x即可滚动并overflow:hidden为父母提供任何您想要的宽度。

它在所有主流浏览器上都能完美运行，包括 Internet Explorer 和 Edge，但 Internet Explorer 8 及更低版本除外。

score -3 · Accepted Answer

我遇到了这个问题，解决起来超级简单。

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

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

它非常简单，应该适用于任何浏览器。

html - 隐藏滚动条，但仍然可以滚动

38 回答 38

JavaScript：

或者

信息：

CSS

HTML

Related

Reference