title: How do you hide that floating scroll indicator thing on mobile?
body: <p>At first I thought you could use this rule which works for desktop Chrome:</p>
  
  <pre class="lang-css prettyprint-override"><code>::-webkit-scrollbar {
      display: none
  }
  </code></pre>
  
  <p>But it didn’t work. After messing with <code>webkit-scrollbar</code> and its other selectors, I realized that this thing might not be part of the <code>webkit-scrollbar</code> after all:</p>
  
  <p><a href="https://i.imgur.com/Dri61qr.png" rel="nofollow noreferrer"><img src="https://i.imgur.com/Dri61qr.png" alt="The gray scroll bar that appears when scrolling on mobile"></a></p>
  
  <p>That’s why it’s not affected to whatever rules I make for <code>webkit-scrollbar</code>.</p>
  
  <p>That floating scroll indicator thing only appears when you scroll a page.</p>
  
  <p>For context, I’m trying to hide that thing for a website I’m using for reading webtoons because it’s distracting. I’m using the Stylus extension on Kiwi browser (an Android browser based on Chrome that supports extensions) to customize the CSS of a website.</p>
  
  <p>Edit: </p>
  
  <p>These are screenshots of Google search results for "Reddit". <code>::-webkit-scrollbar {display: none;}</code> is on effect. I took them while scrolling. The working scrollbar is visible on desktop but not on mobile. The mobile only has that indicator element thing.</p>
  
  <ul>
  <li><a href="https://i.imgur.com/Arv9IXa.png" rel="nofollow noreferrer">Regular - the scrollbar is hidden.</a></li>
  <li><a href="https://i.imgur.com/2oVxAwf.png" rel="nofollow noreferrer">Device Mode - that indicator thing shows up when you scroll.</a></li>
  </ul>