#2167 Implementing auto scroll to top of expanded collapsible section #3520
Conversation
…ctions on expand. Adds an event listener to enable auto scroll to the top of a collapsible section when it is expanded. Credit is due to @ricksuggs for the implementation of the scroll code.
|
You mentioned testing this on our devices if you want to pull this in, I'd suggest testing it quickly. Once you do I'll write some tests and merge it in. |
|
@johnbender - I'll give this a solid test this week |
|
I just tested this PR and I have to say that the behavior feels very abrupt and a bit disorientating. I really like the idea fo this, but getting the behavior right is really important and will probably require a lot of finesse. Right now, this code will jump scroll the currently expanded collapsible to the top of the viewport when clicked so you can see the content within. Because this is a quick jump (no transition) and can jump you around quite a bit, this made the experience feel rougher and less predictable than just scrolling the page myself manually. The biggest place where the current expand behavior feels odd if when the collapsible is at the very bottom of the viewport because when it expands, you may not see than anything happened. I might suggest that we only scroll the page if the collapsible is at or near the bottom of the viewport and that we only scroll the page a small amount, perhaps with some animation, to reveal enough of the expanded content to show what happening without jumping too much and disorienting the user. I'm going to close this PR because I don't feel comfortable pulling this in as is, but I relaly appreciate the contribution and woudl be willing to work with you @adrianpillinger if you want o prototype a more refined approach. Thanks! |
|
No worries, the jumpiness was a compromise that was worth it for our product in our instance, but I fully understand that you do not want this incorporated as is. I'll see if I can look at refining this at some point, but unfortunately at present I am quite busy. |
Adds an event listener to enable auto scroll to the top of a
collapsible section when it is expanded. Credit is due to @ricksuggs
for the implementation of the scroll code.
I have included a functional test page to demonstrate the functionality.
/jquery-mobile/tests/functional/collapsiblesetautoscroll.html
Not being fully familiar with the jquery code I am not sure how you would like to handle this feature if you preferred it to be optional to users. Please amend to provide this functionality, or send me review comments so I can make the necessary changes.
I have tested this in the following browsers