I have a nested list where I have to refresh the entire list everytime a selection in Level 2 is made. This is working very well, except for this one UI issue. Since Level 2 can have many options, I'm showing it in a scrollable area with a fixed height. The problem is that every time a selection is made in Level 2 and the list refreshes, the scrollable area scrolls back to the top.
I've tried some iterations of this post, but it doesn't seem to work in Reactive and I've been trying to implement a javascript solution. But none of it is working. I either get errors or the scrollable area just pops back to the top onParametersChanged instead of retaining the scroll distance.
OnRender Javascript: I've verified that this is working by logging the value to the console.
document.getElementsByClassName("options-scrollable-area")[0].addEventListener('scroll', function() { sessionStorage.scrollTop = $(this).scrollTop(); });
OnReady Javascript: I've verified this is working by sending element.id to the console.
if (sessionStorage.scrollTop != 'undefined') { var element = document.getElementsByClassName("options-scrollable-area")[0]; element.scrollTop(sessionStorage.scrollTop); };
However, when I test this, I get an error: element.scrollTop is not a function. I tried scroll & scrollBy as well, but none retain the scroll when the data refreshes.
Please tell me I'm doing something obvious wrong and there's a simple fix. :( Thanks for any help.
You can do this simply by using following client action by passing the selected element ID as input parameter after refreshing the list data.
Thank you for the response. I tried using the scrollToElement feature, but it did not work. Even though debugging showed I was passing the correct variable to the Client Action, it did not scroll.