Support scroll-padding

[powerbuoy]

Any chance you could add support for scroll-padding?

[jonaskuske]

Yep, sounds very useful – didn't know this property existed! Will look into it :)

[kahl-dev]

Would love to see this happen

[austincarpenter]

Any update on this one? I'm assuming this would include scroll-margin too?

[DavidLindsey0118]

Chiming in, this would be extremely helpful...running into lots of issues with fixed mobile navigation cutting off the top of sections because the lib does not respect scroll-margin or scroll-padding in CSS

[jonaskuske]

Hey, just to give you a quick heads-up: I'll look into it this week, but can't promise anything as of now, as it might be actually quite complicated to make this happen given the current implementation (which just calls .scrollIntoView() and is not concerned with individual scrolls). I have some ideas though, so we'll see!

[DavidLindsey0118]

That would be incredible, thank you!

On Tue, Feb 15, 2022 at 3:47 PM Jonas @.***> wrote:

Hey, just to give you a quick heads-up: I'll look into it this week, but can't promise anything as of now, as it might be actually quite complicated to make this happen given the current implementation (which just calls .scrollIntoView() and is not concerned with individual scrolls). I have some ideas though, so we'll see!

— Reply to this email directly, view it on GitHub https://github.com/jonaskuske/smoothscroll-anchor-polyfill/issues/34#issuecomment-1040776709, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAPZ32FIBTLSTI6JHGRD343U3K3U5ANCNFSM4K5R5XGA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

[DavidLindsey0118]

To clarify, I'm only seeing this particular issue with the lib on IOS devices.

On Tue, Feb 15, 2022 at 4:03 PM David Lindsey @.***> wrote:

That would be incredible, thank you!

On Tue, Feb 15, 2022 at 3:47 PM Jonas @.***> wrote:

Hey, just to give you a quick heads-up: I'll look into it this week, but can't promise anything as of now, as it might be actually quite complicated to make this happen given the current implementation (which just calls .scrollIntoView() and is not concerned with individual scrolls). I have some ideas though, so we'll see!

— Reply to this email directly, view it on GitHub https://github.com/jonaskuske/smoothscroll-anchor-polyfill/issues/34#issuecomment-1040776709, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAPZ32FIBTLSTI6JHGRD343U3K3U5ANCNFSM4K5R5XGA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

[jonaskuske]

Nothing new for scroll-padding, BUT scroll-margin is supported when this lib is used in tandem with seamless-scroll-polyfill: https://github.com/jonaskuske/smoothscroll-anchor-polyfill/issues/51#issuecomment-1063970586

So you can apply a scroll margin to the scrollable/targetable elements (instead of a padding for the scroll container) and avoid the mobile navigation issue:

/* Doesn't work (yet) 👎 */
.scroll-container {
  scroll-padding-top: 100px; /* adjust for fixed navigation */
}

/* Works 👍 */
[id] {
  scroll-margin-top: 100px; /* adjust for fixed navigation */
}

[DavidLindsey0118]

How can I pull that in? I don't see a newer version on npmjs: https://www.npmjs.com/package/smoothscroll-anchor-polyfill

[jonaskuske]

@DavidLindsey0118 No new version of smoothscroll-anchor-polyfill needed, support for scroll-margin is achieved by replacing smoothscroll-polyfill with seamless-scroll-polyfill. (then initializing the latter via seamless.polyfill()) See here: https://github.com/jonaskuske/smoothscroll-anchor-polyfill/issues/51#issuecomment-1063970586

[DavidLindsey0118]

Thank you, I figured it out. For posterity, using NPM, I also had to make sure I was using the latest version of seamless-scroll-polyfill (2.1.8) and also had to implement it via the directions in the README.MD (also here: https://www.npmjs.com/package/seamless-scroll-polyfill under "Use polyfill to patch all methods")

Thanks!