We have a web page in which we stream output from processing jobs. We’ve set up LiveView so that the content of our box reflects the current job output. It works great but we’d like to keep the job output in a fixed height box and always show the latest lines (unless the user scrolls up), similar to GitLab CI job output. We’ve got a pure CSS solution but unfortunately because of an old Firefox bug it works only on Chrome.
So we’re wondering if it’s possible to plug a small piece of JS code that would be called when LiveView triggers an update. We could use this code to scroll down the bottom of our output box whenever new content gets appended to it.
Another use case I’m thinking of for being able to call some custom JS code upon LiveView update is when adding items to a list, we could use a piece of JS to highlight the new item in order to make it more noticeable by the user.
So in case there isn’t a suggestion from anyone more familiar with LiveView forthcoming, it may be worthwhile to check out MutationObserver (as already suggested here) in order to run some client code in response to any changes in the DOM.