打印时在Chrome中隐藏垂直滚动条

Question

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:

Answer 1

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.

Answer 2

This is the solution I found:

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