StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Hiding the scrollthumb in webkit is non-intuitive! My page needed to hide all default browser scroll features in order to implement our own 'infinite scroll' effects. The only thing that was hard was the webkit "thumb" overlay, which only shows up while the screen is in motion (like scrolling with the mousewheel). </p> <p>In order to hide this webkit scrollthumb we had to apply some styles to "all" scrollthumbs, and then apply the hiding effects to my specific thumbs (we have to do this programmatically because we're not sure if the content is long enough to do our custom scroll effects until the page has loaded). </p> <p>These are the styles we used:</p> <pre><code>::-webkit-scrollbar { /* required, although an apparent no-op */ color: inherit; } ::-webkit-scrollbar-thumb { /* leave most bars alone */ background-color: grey; } #customScrollDiv::-webkit-scrollbar-thumb { /* this is the one we care about */ background-color: grey; } .hideThumb::-webkit-scrollbar-thumb { /* we apply the style to actually hide it*/ display: none; } .hideThumb { /* required, although an apparent no-op */ background-color: white; } </code></pre> <p>then, when i determine that i want to programmatically hide that thumbHandle i can do it with jquery: <code>$('#customScrollDiv').toggleClass('hideThumb');</code></p> <p>The tricky part is that you need a lot of "defaulting" of CSS styles that you normally got out of the box, but once you start specifying even one of these webkit styles above then you need THEM ALL or they won't be applied.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload