window.print() 为何触发页面新增滚动条且无法完整打印全部内容

你在屏幕侧移除所有类的overflow属性依然无法解决问题的核心原因是：打印流程下的视口是浏览器临时创建的独立渲染上下文，屏幕侧的样式修改不会直接覆盖打印侧的默认渲染规则。只要存在任意元素的实际渲染尺寸超过临时打印视口的边界，浏览器就会为溢出内容新增对应方向的滚动条，不会自动将溢出内容拆分到打印分页中。

核心排查方向 #

• 优先确认打印场景的样式隔离缺失问题：如果没有独立的@media print规则做适配，原本适配大屏宽度的布局（固定宽度容器、未设置收缩规则的flex/grid子元素、固定像素宽度的内容块）会在打印的窄视口下被强制撑大，形成不受常规overflow控制的溢出空间。
• 排查打印侧的盒模型继承冲突：如果没有在打印场景下强制开启box-sizing: border-box，元素自带的padding、border会被算在内容宽度之外，哪怕设置了100%宽度，实际渲染宽度也会超出视口边界触发溢出。
• 排查定位类元素的溢出影响：页面里所有设置了position: fixed/position: absolute的元素，如果偏移量或尺寸超过打印纸张宽度，这类元素的溢出不会受父级overflow规则约束，会直接撑开整个视口的尺寸，触发全局滚动条。

可直接复用的修复代码 #

/* 打印场景全局重置规则 */
@media print {
  * {
    box-sizing: border-box !important;
    overflow: visible !important;
    max-width: 100% !important;
  }
  html, body {
    width: 210mm !important; /* 锁定为A4纸宽度，避免视口被溢出内容撑开 */
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* 临时将定位类元素改为静态流，避免溢出撑视口 */
  [class*="fixed"], [class*="absolute"] {
    position: static !important;
  }
}

内容的提问来源于stack exchange，提问作者Arturio