sindresorhus/capture-website

Can't seem to get scrollToElement to work

gaminfish opened this issue · 6 comments

I'm trying to use scrollToElement but for some reason, it doesn't work, I'm I've tried using lots of different elements and ways to identify them but can't get it to work. Also, I'm sorry if this is the wrong place to put this but I couldn't get help with this issue anywhere else.

The element must be loaded when the page is loaded. If it's loaded dynamically/lazily, you must use the waitForElement option.

I cannot really help more than that without code that reproduces the issue.

I don't believe that the elements are loaded lazily but I am using waitForElement here's the code:
image
(it appeared strangely when I copied and pasted it so here's an image instead)

Try using

image
E.G.:

 // code here 

syntax in order to let us test your code. Or add it to a pen/jsfiddle.

mre commented

I have the same problem.

const captureWebsite = require('capture-website');

(async () => {
  await captureWebsite.file('https://github.com/sindresorhus/capture-website', 'screenshot.png', { scrollToElement: "#readme" });
})()

This takes a screenshot from the top of the page.

image

Node version 12.18.3, capture-website 1.2.1.
What am I doing wrong?

(Edit: attached screenshot)

I believe this is the issue: https://github.com/sindresorhus/capture-website/blob/master/index.js#L71-L75

Before we try to scroll the parentElement we should also scroll the body so that the parent element is visible. Currently we try to scroll elements that are not scrollable and/or outside of the viewport.

parentElement.scrollIntoView(true) something like this is missing

mre commented

Thanks for the research. It worked for me so I created a PR.