`cy.scrollIntoView` doesn't respect css `scroll-margin` or `scroll-padding` properties

[crfrolik]

Current behavior

If you have an element inside of a scroll container, and you apply something like:

.elem {
  scroll-margin-top: 50px;
}

This will work fine if you actually call the element's scrollIntoView function. The native function will respect the scroll margin.

However, cy.scrollIntoView uses the jquery.scrollTo plugin, which doesn't respect these new properties. It hasn't been updated in years, so the only option is to probably abandon this plugin and instead use native scrollIntoView.

Desired behavior

No response

Test code to reproduce

See above.

Cypress Version

13.6.6

Node version

v20

Operating System

N/A

Debug Logs

No response

Other

No response

[jennifer-shehane]

@crfrolik Yes, updating/replacing jquery is a big undertaking. It'd be nice to have a reproducible example to run to show this issue. We'd need to make one to write a failing test anyway.

[crfrolik]

@crfrolik Yes, updating/replacing jquery is a big undertaking. It'd be nice to have a reproducible example to run to show this issue. We'd need to make one to write a failing test anyway.

Thanks for the response.

To be clear, I didn't want to suggest replacing jquery. Just the jquery.scrollTo plugin. That may be no small undertaking either, but it's definitely a much smaller surface area than all of jquery.

[jennifer-shehane]

Yah we'd be open to that

[crfrolik]

@jennifer-shehane I created a reproducible example here: https://github.com/crfrolik/cypress-scroll-test