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.