title: Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink
body: <p>WebKit/Blink's (Safari/Chrome) default behaviour on MacOS since 10.7 (Mac OS X Lion) is to hide scroll bars from trackpad users when they're not in use. <a href="https://stackoverflow.com/q/6818466" title="a related ranty &quot;question&quot;">This can be confusing</a>; the scroll bar is often the only visual cue that an element is scrollable.</p>
  
  <h3>Example (<a href="https://jsfiddle.net/JBXqQ/7/" rel="noreferrer">jsfiddle</a>)</h3>
  
  HTML
  
  <pre><code>&lt;div class="frame"&gt;
      Foo&lt;br /&gt;
      Bar&lt;br /&gt;
      Baz&lt;br /&gt;
      Help I'm trapped in an HTML factory! 
  &lt;/div&gt;
  </code></pre>
  
  CSS
  
  <pre><code>.frame {
      overflow-y: auto;
      border: 1px solid black;
      height: 3em;
      width: 10em;
      line-height: 1em;
  }​
  </code></pre>
  
  WebKit (Chrome) Screenshot
  
  <p><img src="https://i.stack.imgur.com/WQpxP.png" alt="screenshot of a div with no visible scroll bar"></p>
  
  Presto (Opera) Screenshot
  
  <p><img src="https://i.stack.imgur.com/vXZAD.png" alt="screenshot of a div with a visible scroll bar"> <img src="https://i.stack.imgur.com/D5VFw.png" alt=""></p>
  
  <hr>
  
  <p>How can I force a scroll bar to always be displayed on a scrollable element in WebKit?</p>