Support scroll-padding

Question

Support scroll-padding

Opened this issue 5 years ago · 11 comments

powerbuoy commented 5 years ago

Any chance you could add support for scroll-padding?

Answer 1 · 2020-03-01T15:10:20.000Z

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

Answer 2 · 2021-06-11T12:56:37.000Z

Would love to see this happen

Answer 3 · 2022-01-24T05:34:29.000Z

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

Answer 4 · 2022-02-15T18:53:21.000Z

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

Answer 5 · 2022-02-15T20:46:59.000Z

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!

Answer 6 · 2022-02-15T21:03:52.000Z

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 <#34 (comment)>, 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: ***@***.***>

Answer 7 · 2022-02-15T21:09:19.000Z

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 > <#34 (comment)>, > 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: > ***@***.***> >

Answer 8 · 2022-03-12T01:08:43.000Z

Nothing new for scroll-padding, BUT scroll-margin is supported when this lib is used in tandem with seamless-scroll-polyfill: #51 (comment)

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 */
}

Answer 9 · 2022-03-14T18:27:35.000Z

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

Answer 10 · 2022-03-15T01:03:03.000Z

@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: #51 (comment)

Answer 11 · 2022-03-15T16:49:31.000Z

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!