Skip to content

Instantly share code, notes, and snippets.

@IceCreamYou

IceCreamYou/force-scrollbars-visible.css

Last active June 13, 2025 09:46
Show Gist options
  • Save IceCreamYou/cd517596e5847a88e2bb0a091da43fb4 to your computer and use it in GitHub Desktop.
Save IceCreamYou/cd517596e5847a88e2bb0a091da43fb4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. IceCreamYou revised this gist Jul 13, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion force-scrollbars-visible.js
    View file
    Original file line number Diff line number Diff line change
    @@ -27,6 +27,6 @@ window.addEventListener('load', function() {
    if (!areScrollbarsVisible()) {
    document.body.classList.add('force-show-scrollbars');
    }
    }
    });

    })();
  2. IceCreamYou revised this gist May 11, 2016. No changes.
  3. IceCreamYou created this gist May 11, 2016.
    34 changes: 34 additions & 0 deletions force-scrollbars-visible.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    .force-show-scrollbars ::-webkit-scrollbar-track:vertical {
    border-left: 1px solid #E7E7E7;
    box-shadow: 1px 0 1px 0 #F6F6F6 inset, -1px 0 1px 0 #F6F6F6 inset;
    }

    .force-show-scrollbars ::-webkit-scrollbar-track:horizontal {
    border-top: 1px solid #E7E7E7;
    box-shadow: 0 1px 1px 0 #F6F6F6 inset, 0 -1px 1px 0 #F6F6F6 inset;
    }

    .force-show-scrollbars ::-webkit-scrollbar {
    -webkit-appearance: none;
    background-color: #FAFAFA;
    width: 16px;
    }

    .force-show-scrollbars ::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    background-color: #C1C1C1;
    border-color: transparent;
    border-radius: 9px 8px 8px 9px;
    border-style: solid;
    border-width: 3px 3px 3px 4px; /* Workaround because margins aren't supported */
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
    }

    /* Unfortunately scrollbars can't use CSS transitions. Also, it's not possible
    to highlight the thumb when the scrollbar track is hovered without some
    JavaScript acrobatics; https://jsfiddle.net/QcqBM/6/ is a start, but you
    also have to check whether the element has a scrollbar and if so how wide
    it is. */
    .force-show-scrollbars ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5);
    }
    32 changes: 32 additions & 0 deletions force-scrollbars-visible.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    (function() {

    // Returns whether scrollbars show up on scrollable elements.
    // This is false on Macs when the "General > Show scroll bars" setting is
    // not set to "Always" (the default is "When scrolling"). The approach
    // taken here is to create an element that will scroll and then compare
    // its outer width (including scrollbars) to its inner width (excluding
    // scrollbars).
    function areScrollbarsVisible() {
    var scrollableElem = document.createElement('div'),
    innerElem = document.createElement('div');
    scrollableElem.style.width = '30px';
    scrollableElem.style.height = '30px';
    scrollableElem.style.overflow = 'scroll';
    scrollableElem.style.borderWidth = '0';
    innerElem.style.width = '30px';
    innerElem.style.height = '60px';
    scrollableElem.appendChild(innerElem);
    document.body.appendChild(scrollableElem); // Elements only have width if they're in the layout
    var diff = scrollableElem.offsetWidth - scrollableElem.clientWidth;
    document.body.removeChild(scrollableElem);
    return diff > 0;
    }

    window.addEventListener('load', function() {
    // Show scrollbars if they're hidden.
    if (!areScrollbarsVisible()) {
    document.body.classList.add('force-show-scrollbars');
    }
    }

    })();