-
Notifications
You must be signed in to change notification settings - Fork 66
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
Explain how to use # for scrolling to an id on a sub page #56
Comments
Is this purely documentation? I'm not sure we have an implemented strategy for this yet. /cc @rictic |
@cdata that's a good point; I'm pretty sure this will require some implementation. |
We haven't proved one out enough to have a recommended strategy, but it may be very straightforward. e.g. If you're not using the hash as the path then you could observe the |
I think it may be something that needs to be handled by the app (or user's element, anyway), but we should talk about patterns. In particular, if you're loading data dynamically, you need to wait until the data is loaded & rendered, then scrollIntoView. And the ID you're scrolling to could be in light DOM, local DOM, or even a child's local DOM. So you may need to know the structure of the page in order to scroll intelligently. For example, in https://github.com/PolymerElements/iron-doc-viewer/blob/master/iron-doc-viewer.html#L211 |
It would be good to verify the behavior of using |
Yeah, it doesn't work. Or at least it doesn't work consistently. You can try this little jsbin here: http://output.jsbin.com/piriwa#3 In shady DOM, In native shadow DOM, only the IDs that aren't contained in any shadow root work at all. ( So in most cases I suspect one of the elements is going to have to handle this themselves. unless: |
I wonder if this is an opportunity for us to define specialized semantics for how hash links should work in an app that has several layers of ShadowDOM. Perhaps we could prescribe a pathing mechanism that users can leverage to specify jump points through a series of shadow boundaries. For example:
This is just a random idea. Maybe not ideal because we're inventing semantics that depart from the platform. @rictic WDYT? |
@cdata That's clever. I like that the reverse function to generate the hash for a node is similarly straightforward. Advantages:
Disadvantages:
|
👍 to @cdata's proposal |
It feels to me like @cdata's proposal cuts against the grain of the primitives. It also feels like it breaks Also, how do you know which element you have to scroll? And how do you know that the page has rendered enough so that you can scroll to the ID? What if it's a big honking page that takes several frames to load and render? In these cases, I'd argue, you want the lowest level component that understands scrolling to deal with it. That said, I don't have a better proposal for an overarching solution. I thought of an event-like scheme where individual components can handle and cancel propagation of the change—but pretty sure that falls apart because data binding can't propagate that way. Also considered each route having a |
So, um, I guess for the doc site we'll fall back to "application listens to hashchange, decides which component should manage the scroll state for this event" which is basically what @rictic said way back in #56 (comment). 🐐 |
It's awfull way, but you can do something like that:
|
I can have a route like /article/1#subsection
It would be nice with a explanation on how to load that route and still make it scroll to the #subsection like it would had I used actual pages instead of routing.
The text was updated successfully, but these errors were encountered: