Scroll to a dynamic element in a scroll suggestions-CodePudding

I'm building a city suggestions and as I've added scroll by arrows functionality, I have noticed that the logic works correctly, but as I've scroll more than the visible viewport (max-height), than the other suggestions which we can call "active" are not visible, we need to manually scroll to them, is it possible to somehow scroll together to see them?

I need to find a way to manually force the viewport to be on the active suggestion top, but how can I achieve it?

Things in action: https://i.gyazo.com/80c85e1112a4562e8fc57e268916abac.mp4

Styles for wrapper: flex-col, max-height: 320px, overflow-y: auto

Logic block:

<div class:invisible={ ! is_suggestions_visible } class:opacity-0={ ! is_suggestions_visible }  style="box-shadow: 8px 8px 40px 5px rgba(0, 0, 0, 0.08);transition: visibility 0s, opacity 0.5s linear;">
{#each visible_suggestions as suggestion, i}
<div
    class:bg-white={active_suggestion_i == i}
    on:click={() =>
    toggle_active_suggestion(suggestion.name, suggestion.pk, suggestion.is_munipacity || false)}
    class:rounded-b-xl={i   1 == visible_suggestions.length}
    
    >
    <p >{suggestion.name}</p>
    <p ><span >{suggestion.count}</span> active listings</p>
</div>
{/each}
</div>

CodePudding user response：

You can use an action for that, e.g.

function scrollOnActive(node, active) {
    function update(active) {
        if (active)
            node.scrollIntoView();
    }
    update(active);

    return { update };
}

<div
    class:bg-white={active_suggestion_i == i}
    use:scrollOnActive={active_suggestion_i == i}
    ...>

REPL example

The function scrollIntoView has various options to additionally adjust scroll behavior. You could also perform additional checks if you do not want to always trigger a scroll.