Hide scrollbar when printing a web page

Published on - Updated on

Recently, I faced an issue in Chrome where the browser kept displaying a horizontal scrollbar for my unordered lists, even though no content was overflowing the container.

After searching the internet to see if other people faced a similar issue, I came up empty-handed, and in the end, I resolved to hide the scrollbars in Webkit browsers in the print stylesheet. In any case, you don't want scrollbars to display when printing content.

Below you can find the snippet I used. Note that you do not need the media query if you have a dedicated print stylesheet.

::-webkit-scrollbar {
    @media print {
        display: none;
    }
}

See ::-webkit-scrollbar - MDN for more information.