Svelte中如何创建可滚动下拉列表？

原生<select>的下拉面板属于浏览器原生UI组件，无法通过overflow-y: scroll这类CSS属性直接控制其滚动行为，而且size属性会将其转换为固定高度的列表框，不符合点击展开下拉的需求。要实现你想要的效果，需要自定义一个下拉组件，以下是Svelte的实现示例：

<script>
    let names = ['Name1','Name2','Name3','Name4','Name5',
        'Name6','Name7','Name8','Name9','Name10',
        'Name11','Name12','Name13','Name14','Name15',
        'Name16','Name17','Name18','Name19','Name20',];
    
    let selected = '';
    let isOpen = false;

    // 点击选项时选中值并关闭下拉
    function selectName(name) {
        selected = name;
        isOpen = false;
    }

    // 点击外部关闭下拉
    function handleClickOutside(event) {
        const dropdown = document.querySelector('.custom-dropdown');
        if (!dropdown.contains(event.target)) {
            isOpen = false;
        }
    }

    // 添加全局点击监听
    import { onMount, onDestroy } from 'svelte';
    onMount(() => {
        window.addEventListener('click', handleClickOutside);
    });
    onDestroy(() => {
        window.removeEventListener('click', handleClickOutside);
    });
</script>

<div class="custom-dropdown">
    <!-- 触发按钮 -->
    <button class="dropdown-trigger" on:click={() => isOpen = !isOpen}>
        {selected || '选择名称'}
    </button>

    <!-- 可滚动下拉列表 -->
    {#if isOpen}
        <ul class="dropdown-list">
            {#each names as name}
                <li 
                    class="dropdown-item" 
                    on:click={() => selectName(name)}
                    class:active={selected === name}
                >
                    {name}
                </li>
            {/each}
        </ul>
    {/if}
</div>

<style>
    .custom-dropdown {
        position: relative;
        width: 200px;
    }

    .dropdown-trigger {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background: white;
        cursor: pointer;
        text-align: left;
    }

    .dropdown-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 200px; /* 设置最大高度触发滚动 */
        overflow-y: auto;
        border: 1px solid #ccc;
        border-top: none;
        border-radius: 0 0 4px 4px;
        background: white;
        list-style: none;
        padding: 0;
        margin: 0;
        z-index: 100;
    }

    .dropdown-item {
        padding: 8px 12px;
        cursor: pointer;
    }

    .dropdown-item:hover, .dropdown-item.active {
        background-color: #f0f0f0;
    }
</style>

方案说明： #

• 用按钮替代原生<select>的触发区域，点击切换下拉列表的显示/隐藏状态
• 用<ul>构建下拉列表，通过max-height限制高度，overflow-y: auto实现自动滚动
• 添加点击外部关闭下拉的逻辑，提升交互体验
• 支持选中状态高亮，和原生下拉的交互逻辑一致

内容的提问来源于stack exchange，提问作者Anandu Suresh