dom content is not completely converted

Use case: description, code

I generated a lot of things in a div cycle that exceeded the height of the div, so I set overflow: automatically added a side scroll bar to display the excess content, like Figure 1 :However, when I use the toPng method to convert this div, it only converts the content of the div in the current scroll bar, and does not convert the remaining content that can be displayed through the scroll bar, as shown in Figure 2:

This is my code for conversion:

print: function () {
      const node = this.$refs.list
      const images = this.$refs.img
      const BASE_DPI = 72
      const scale = window.devicePixelRatio
      toPng(node, {
        height: node.offsetHeight * scale,
        width: node.offsetWidth * scale,
        style: {
          transform: `scale(${scale})`,
          transformOrigin: 'top left',
          width: `${node.offsetWidth}px`,
          height: `${node.offsetHeight}px`
        }
      })
        .then((dataUrl) => {
          images.src = changeDpiDataUrl(dataUrl, BASE_DPI * scale)
          this.$print(images)
        })
    }

What should I do to make it convert the content of my entire div into a picture, thanks.

Expected behavior

Convert all the contents of node into PNG images and call the browser to print

Actual behavior (stack traces, console logs etc)

Only part of the node content is converted

Library version

^2.6.0

Browsers

[x] Edge 87.0.664.75
[x] Chrome 89.0.4381.7

tsayen / dom-to-image