riot-web/res/css/structures/_AutoHideScrollbar.scss

/*
Copyright 2018 New Vector Ltd

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*
1. for browsers that support native overlay auto-hiding scrollbars
*/
.mx_AutoHideScrollbar {
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
/*
2. webkit also supports overflow:overlay where the scrollbars don't take any space
in the layout but they don't autohide, so do that only on hover
*/
body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar {
    overflow-y: hidden;
}

body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar:hover {
    overflow-y: overlay;
}
/*
3. as a last fallback, compensate for the scrollbar taking up space in the layout
by having giving the child element (.mx_AutoHideScrollbar_offset) a
negative right margin of the width of the scrollbar when the container
is overflowing. This is what Firefox ends up using. Overflow is detected
in javascript, and adds the mx_AutoHideScrollbar_overflow class to the container.
This only works in Firefox, which should be fine as this fallback is only needed there.
*/
body.mx_scrollbar_nooverlay {
    .mx_AutoHideScrollbar {
        overflow-y: hidden;
    }

    .mx_AutoHideScrollbar:hover {
        overflow-y: auto;
    }

    /*
    offset scrollbar width with negative margin-right

    include before and after psuedo-elements here so they can
    be used to do something interesting like scroll-indicating
    gradients (see IndicatorScrollBar)
    */
    .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow > .mx_AutoHideScrollbar_offset,
    .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::before,
    .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::after
    {
        margin-right: calc(-1 * var(--scrollbar-width));
    }
}

// style the native scrollbars ...
// ... standard css scrollbars (firefox at time of writing)
.mx_AutoHideScrollbar {
    scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
    scrollbar-width: thin;
}
// or fallback for webkit browsers
::-webkit-scrollbar {
    width: 6px;
    background-color: $scrollbar-track-color;
}

::-webkit-scrollbar-thumb {
    background-color: $scrollbar-thumb-color;
    border-radius: 3px;
}