城市建议列表：如何实现激活项自动滚动至视口顶部？

要实现激活项自动滚动到容器可视区域顶部，你可以利用浏览器原生的Element.scrollIntoView()方法，结合Svelte的响应式特性触发滚动逻辑，具体步骤如下：

1. 存储建议项元素引用
   在组件脚本中声明一个数组，用于存储每个建议项的DOM元素引用：

let suggestionElements = [];

2. 绑定元素引用到循环项
   在#each循环的建议项<div>上添加bind:this，将每个元素存入数组：

<div
    class:bg-white={active_suggestion_i == i}
    bind:this={suggestionElements[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>

3. 响应激活项变化触发滚动
   使用Svelte的响应式语句$:，监听active_suggestion_i的变化，一旦激活项切换，就调用scrollIntoView()将目标元素滚动到容器顶部：

$: if (active_suggestion_i !== undefined && suggestionElements[active_suggestion_i]) {
  suggestionElements[active_suggestion_i].scrollIntoView({
    behavior: 'smooth', // 平滑滚动效果，可选'auto'实现瞬间定位
    block: 'start' // 让元素顶部对齐容器可视区域顶部
  });
}

完整修改后的容器代码 #

<script>
  let suggestionElements = [];
  // 保留你已有的变量：is_suggestions_visible, visible_suggestions, active_suggestion_i, toggle_active_suggestion
  
  $: if (active_suggestion_i !== undefined && suggestionElements[active_suggestion_i]) {
    suggestionElements[active_suggestion_i].scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  }
</script>

<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}
    bind:this={suggestionElements[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>

说明 #

• block: 'start' 确保激活项的顶部与容器可视区域的顶部对齐，完全满足你“定位到激活项顶部”的需求。
• 如果不需要平滑滚动，将behavior设置为'auto'即可实现瞬间定位。
• 该方法会自动识别容器的overflow-y: auto属性，仅在容器内部滚动，不会影响页面整体滚动。

内容的提问来源于stack exchange，提问作者Džiugas Bižokas