Let's say you need to apply the css style to all elements.

*{ overflow-y: visible !important; }

To all the elements with scrolling revealed. Then the page is converted to PDF, and then you need to return everything back as it was. Is it something you can do?

  • Can. Create a style, write a rule, add. Then delete the style. - Stepan Kasyanenko
  • one
    How to make a selector .pdf-print * , and cling the pdf-print class to body or another block? - Total Pusher

1 answer 1

Can. Create a style tag, write a CSS rule, add it. Then remove the style tag.

 var styleExpand = null; function expandAll() { if (styleExpand) return; styleExpand = document.createElement('style'); styleExpand.innerHTML = `*{ overflow: visible!important; }`; document.body.appendChild(styleExpand); } function collapseAll() { if (styleExpand) { document.body.removeChild(styleExpand); styleExpand = null; } } 
 .content-scroll, .content-visible, .content-hidden, .content-auto { width: 100px; height: 100px; margin: 20px; } .content-scroll { overflow: scroll; } .content-hidden { overflow: hidden; } .content-auto { overflow: auto; } .content-visible { overflow: visible; } 
 <button onclick="expandAll()"> Expand </button> <button onclick="collapseAll()"> Collapse </button> <div class="content-scroll"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus atque autem ducimus facilis fugit, incidunt nam natus, neque praesentium, quidem repellendus sed similique veritatis. Atque ducimus ipsa natus optio similique?</div> <div class="content-hidden"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus atque autem ducimus facilis fugit, incidunt nam natus, neque praesentium, quidem repellendus sed similique veritatis. Atque ducimus ipsa natus optio similique?</div> <div class="content-auto"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus atque autem ducimus facilis fugit, incidunt nam natus, neque praesentium, quidem repellendus sed similique veritatis. Atque ducimus ipsa natus optio similique?</div> <div class="content-visible"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus atque autem ducimus facilis fugit, incidunt nam natus, neque praesentium, quidem repellendus sed similique veritatis. Atque ducimus ipsa natus optio similique? </div>