title: Only hide scrollbar, not disable scrollbar on Firefox Windows
body: <p><strong>This question is only about Firefox on Windows.</strong></p>
  
  <p>Here is the spec : The scrollbar should be hidden but scroll should be enabled. </p>
  
  <p>On MacOS, the scrollbars will auto-hide and it is less jarring experience. However on Windows, the scroll bars just stay there and don't auto-hide. On Windows 10, the scrollbars are just too ugly and square.</p>
  
  <hr>
  
  <p>Here are invalid answers or additional limitations:</p>
  
  <ul>
  <li>Do not add margin/padding to the right/bottom as there is no good prediction of this value.</li>
  <li>Do not use <code>{overflow:hidden}</code> as it would disable scrolling.</li>
  </ul>
  
  <hr>
  
  <p>Here is as a CSS class that can be applied on all div/element that will have this behavior. These rules don't work as of now and the ugly scrollbar remains. </p>
  
  <p>How would you fix this CSS class ??</p>
  
  <pre><code>.disable-scrollbars {
      scrollbar-width: none; /* Newer Firefox and not confirmed */
      overflow: -moz-scrollbars-none; /* Older Firefox*/
  }
  </code></pre>
  
  <hr>
  
  <p>The experience should be similar to Chrome/Safari with <code>-webkit-scrollbar:none;</code> which works on both MacOS and Windows.</p>