滾動到滾動建議中的動態元素

Question

我正在構建一個城市建議，並且當我添加了按箭頭滾動功能時，我注意到邏輯工作正常，但是因為我滾動的不僅僅是可見視口（最大高度），而不是我們的其他建議可以調用“活動”是不可見的，我們需要手動滾動到它們，是否可以以某種方式一起滾動以查看它們？

我需要找到一種方法來手動強制視口位於活動建議頂部，但我該如何實現呢？

行動中的事情： https://i.gyazo.com/80c85e1112a4562e8fc57e268916abac.mp4

Styles 用於包裝器： flex-col, max-height: 320px, overflow-y: auto

邏輯塊：

<div class:invisible={ ! is_suggestions_visible } class:opacity-0={ ! is_suggestions_visible } class="flex flex-col absolute z-10 mt-3 w-full bg-purewhite rounded-b-xl max-h-[320px] overflow-y-auto" 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}
    class="py-2 px-4 transition ease-in-out cursor-pointer hover:bg-white"
    >
    <p class="text-primary font-medium">{suggestion.name}</p>
    <p class="text-secondary"><span class="font-medium">{suggestion.count}</span> active listings</p>
</div>
{/each}
</div>

Answer 1

您可以為此使用一個動作，例如

function scrollOnActive(node, active) {
    function update(active) {
        if (active)
            node.scrollIntoView({ block: 'nearest' });
    }
    update(active);

    return { update };
}

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

示例

function scrollIntoView有多種選項可以額外調整滾動行為。 如果您不想總是觸發滾動，您還可以執行額外的檢查。