在移动设备上隐藏水平滚动div中的滚动条

Question

我需要隐藏可水平滚动的div上的滚动条。我可以将其隐藏在桌面上，但在移动设备上仍然可以保留（特别是我在iPhone Safari上尝试过）。

我知道这是有可能的，因为如果您在智能手机上浏览Apple网站here，您会在标题下方看到其产品可滚动而没有任何滚动条的情况。我检查了代码，但看起来像我的。

我正在使用以下代码：

div.container-horizontal-scroll {
  // Set horizontal scroll
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;

  // Hide scrollbar
  -ms-overflow-style: none;  // IE 10+
  scrollbar-width: none;  // Firefox
  &::-webkit-scrollbar {
    display: none;  // Safari and Chrome
    width: 0 !important;
  }

}

有人知道为什么它不起作用吗？谢谢