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

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

Use

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

使用此选项可以隐藏滚动条，但保留功能：

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

隐藏IE、Edge和Firefox的滚动条

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

这对我有用

div {
  -ms-overflow-style: none; /* Edge, Internet Explorer */
  scrollbar-width: none; /* Firefox */
  overflow-y: scroll;
}

// hides scrollbars while allowing to scroll
div::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

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

除了“溢出”之外，你写的所有内容都是正确的。适用于Chrome和其他浏览器的webkit

overflow-y: scroll;

or

overflow-y: auto;

对于Firefox和Edge

scrollbar-width: none;

or

scrollbar-width: thin;

我的问题是：我不想在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;
}