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

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

overflow-y: scroll;

or

overflow-y: auto;

对于Firefox和Edge

scrollbar-width: none;

or

scrollbar-width: thin;

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

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

取两个容器。内部将是可滚动的容器，外部显然将容纳内部：

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

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

如果出于某种原因，您希望使用box模型：border box，则向内部div添加填充（如当前接受的答案）将不起作用。

在这两种情况下都有效的方法是将内部div的宽度增加到100%加上滚动条的宽度（假设溢出：隐藏在外部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 + ')';

这对我有用

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;