如何使用javascript打印可滚动的div内容？

Question

I have tried multiple different avenues on trying to get this to work and when rendering the print media query using dev tools I get a scrollable div but when printing I just get 1 page. I've attached my css below.

  body * {
    visibility: hidden;
    overflow-y: auto;
  }
  #print,
  #print * {
    visibility: visible;
  }
  #print {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
  }

Answer 1

Your question is very general, and I'm not going to try to answer you, however I will tell you how to try to solve it yourself.

Using Chrome's dev tools, it is possible to see how the page would look like when printed. Press F12 to open dev tools, then under Rendering find the Emulate CSS media type and select print - then you can play around with styles on the Elements page and see how that would translate to a printed version.