CODEWITHSUNDEEP
javascriptcss
Abdullah Al Zuhair
Abdullah Al Zuhair

Reputation: 41

Hide Vertical Scrollbar in Chrome while printing

How can I remove the scrollbar while I print report in Chrome Browser. Here is my code:

<style>
     @media print {
         @page {
             size: A4 portrait;
             margin:1cm;
         }
</style>

Here is the picture:

enter image description here

Upvotes: 1

Views: 6495

Answers (2)

Abdullah Al Zuhair
Abdullah Al Zuhair

Reputation: 41

This is the solution I found:

 @media print{
            @page {
                size: A4 portrait;
                margin:1cm;
            }
            ::-webkit-scrollbar {
                display: none;
            }
        }

Upvotes: 3

Andre
Andre

Reputation: 4635

overflow: hidden is the css property you are looking for. It removes the scrollbar and removes overflowing content. See: https://developer.mozilla.org/en/docs/Web/CSS/overflow

<style>
     @media print{
         @page {
             size: A4 portrait;
             margin:1cm;
             overflow: hidden;
            }
     }
</style>

Or try to set the overflow hidden without depending on the media query: 

html { overflow: hidden; }

If this does not help for printing, maybe have a look at the answer of following question: How to hide the scroll bar and with the content ramaining scrollable?

As mentioned there you could try to set the width of the scrollbar to zero for webkit browsers.

Upvotes: 1

Related Questions