search

magic-akari / seamless-scroll-polyfill

Scroll Behavior polyfill
https://www.npmjs.com/package/seamless-scroll-polyfill
MIT License
159 stars 12 forks source link

Added support for CSS scroll-margin property #102

Closed paradoc closed 3 years ago

paradoc commented 3 years ago

Implementation for issue #101

magic-akari commented 3 years ago

Thanks for your pull request. But the scroll-margin is defined in CSS Scroll Snap Module Level 1 Specification . I'm afraid that it's confusing to use scroll-margin without scroll-snap.

tzappia commented 3 years ago

@magic-akari would you reconsider this feature given what's stated here: https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin

"If a page is navigated to a fragment that defines a target element (one that would be matched by :target, or the target of scrollIntoView()), the UA should use the element’s scroll snap area, rather than just its border box, to determine which area of the scrollable overflow area to bring into view, even when snapping is off or not applied on this element."

I came across this from this webkit bug which suggests some additional changes would be required to this PR to support the naming changes.

paradoc commented 3 years ago

Sorry for the delayed response.

@magic-akari I'm a bit confused on how I could add in the scroll-snap behavior in this pull request.

I've observed that when we have the CSS properties applied:

.scrollContainer {
  scroll-snap-type: x mandatory;
}
.item {
  scroll-snap-align: start;
}

and the scroll options:

{
  ...
  inline: "center"
}

The scroll options' inline property will be overridden in favor of scroll snap values. Please see: https://stackblitz.com/edit/react-ts-yufhwo?file=index.tsx

Also, there seems to be a bug where the smooth behavior is lost when scroll snap properties are applied.

@tzappia Good catch! Thanks for spotting that.