Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for disabling top-scroll for partials #1923

Closed
csvn opened this issue Oct 12, 2023 · 5 comments
Closed

Add support for disabling top-scroll for partials #1923

csvn opened this issue Oct 12, 2023 · 5 comments
Labels
feat New feature or request

Comments

@csvn
Copy link
Contributor

csvn commented Oct 12, 2023

The new Partials feature looks really nice so far. Though, when I did a quick test with updating add-to-cart and the cart status via partials, the top-scroll feature was in the way. Scrolling to top is a great thing to do when the entire main content changes and it's a new "page". But if using partials to replace small areas on the page, it's not as great.

Or is it a use-case that is not intended for partials? In the demo below there are only two small partials, highlighted in red.

Screenshare.-.2023-10-12.4_40_59.PM.mp4

image

It would be awesome if there was a f-no-scroll or similar directive to use. Or perhaps f-client-nav='no-scroll'. Some way to say "navigations here should not scroll". Still, it looks to me like Partials are really promising so far!

@csvn csvn changed the title Add support for disabling scroll-to-top Add support for disabling top-scroll for partials Oct 12, 2023
@marvinhagemeister marvinhagemeister added the feat New feature or request label Oct 12, 2023
@marvinhagemeister
Copy link
Collaborator

This is a perfect use case for partials. Agree that we should have a way to disable the "scroll to top" feature.

@marvinhagemeister
Copy link
Collaborator

FWIW: As a workaround for now you could use a <button> instead of <a> for the "Add to Cart" button. The scroll logic only comes into play when clicking on a link.

@csvn
Copy link
Contributor Author

csvn commented Oct 13, 2023

Ohh, interesting. Thanks for the suggestion! I read through the partials documentation, but did not realize you can use other than links. I think this part, and the fact all examples use <a>, threw me off:

When the f-partial attribute is present, Fresh will navigate to the page URL defined in the href attribute, but fetch the updated UI from the URL specified in f-partial instead. This can be a highly optimized route that only delivers the content you care about.
https://fresh.deno.dev/docs/concepts/partials#optimizing-partial-requests

But I see now that I missed this part:

Currently, f-partial is scoped to <a>, <button> and <form> elements. This might be extended to more elements in the future.

So I guess using on <form> will use the f-partial URL to post to instead of the configured action attribute of the form on submit? That seems really useful. A small form+button example could be nice.

@marvinhagemeister
Copy link
Collaborator

marvinhagemeister commented Oct 13, 2023

Forms are a bit unfinished yet, but plan is to make them work with partials too. Also good point on the documentation not mentioning button really

@marvinhagemeister
Copy link
Collaborator

Closing as form support landed with #1930

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants