search

jonaskuske / smoothscroll-anchor-polyfill

⚓ Apply smooth scroll to anchor links, polyfill scroll-behavior
https://jonaskuske.github.io/smoothscroll-anchor-polyfill
MIT License
41 stars 3 forks source link

Support scroll-padding #34

Open powerbuoy opened 4 years ago

powerbuoy commented 4 years ago

Any chance you could add support for scroll-padding?

jonaskuske commented 4 years ago

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

kahl-dev commented 3 years ago

Would love to see this happen

austincarpenter commented 2 years ago

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

DavidLindsey0118 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

jonaskuske commented 2 years ago

@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 commented 2 years ago

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!