details - animation - scrollIntoView
👀ui/ux
front-end
front-endI have a small question.
I’m using the <details> element in my new project. An issue was raised by a client when <details> elements are used as accordions by giving them the same name.
First, the client asked for a small animation when the <details> open or close.
I implemented this using interpolate-size: allow-keywords; and details::content.
Second, the client made a good remark: when a <details> element with a lot of content is open, and you click another <details> that appears below it, the second one opens but the space created by the content of the first element moves the viewport. As a result, the clicked question can move out of the viewport.
This is quite bad for UX. I think this should ideally be handled by the browser, but for now I added a simple function using scrollIntoView().
The scrollIntoView() solution works in all browsers and, in my opinion, should probably be part of the <details> specification. However, when the animation is added, Chrome (which supports the animation) behaves incorrectly and scrollIntoView() does not work as expected.
I have a CodePen ready: if you add the code from lines 1 to 3 and from line 30 to the end, the animation works but scrollIntoView() fails.
So at the moment it’s either the animation or the scrolling behavior, but not both.
I’m wondering if someone could explain why this happens or suggest a possible solution.
https://codepen.io/Joan-fernandez-the-vuer/pen/VYKezjJ
I’m using the <details> element in my new project. An issue was raised by a client when <details> elements are used as accordions by giving them the same name.
First, the client asked for a small animation when the <details> open or close.
I implemented this using interpolate-size: allow-keywords; and details::content.
Second, the client made a good remark: when a <details> element with a lot of content is open, and you click another <details> that appears below it, the second one opens but the space created by the content of the first element moves the viewport. As a result, the clicked question can move out of the viewport.
This is quite bad for UX. I think this should ideally be handled by the browser, but for now I added a simple function using scrollIntoView().
The scrollIntoView() solution works in all browsers and, in my opinion, should probably be part of the <details> specification. However, when the animation is added, Chrome (which supports the animation) behaves incorrectly and scrollIntoView() does not work as expected.
I have a CodePen ready: if you add the code from lines 1 to 3 and from line 30 to the end, the animation works but scrollIntoView() fails.
So at the moment it’s either the animation or the scrolling behavior, but not both.
I’m wondering if someone could explain why this happens or suggest a possible solution.
https://codepen.io/Joan-fernandez-the-vuer/pen/VYKezjJ
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
