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:

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:

• javascript
• css

Share Improve this question Follow edited Sep 11, 2019 at 9:55 user5734311 asked Sep 11, 2019 at 9:53 Abdullah Al ZuhairAbdullah Al Zuhair 4122 silver badges99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

This is the solution I found:

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

overflow: hidden is the css property you are looking for. It removes the scrollbar and removes overflowing content. See: https://developer.mozilla/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.