如何让input关联的datalist随当前选中项同步滚动？

原生<datalist>的下拉弹窗属于浏览器原生控件，我们无法直接访问或操作其内部DOM（包括滚动容器），这会导致部分场景下（比如存在重复选项、特定浏览器兼容问题），用箭头键选择选项时滚动条无法自动跟随。以下是两种解决思路：

1. 清理重复选项（优先推荐） #

你的代码里存在大量重复的option值，这会干扰浏览器对选中项的定位逻辑，进而引发滚动异常。先移除重复选项，绝大多数浏览器会自动恢复正常的滚动跟随行为：

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

2. 自定义键盘事件监听+滚动控制（适用于无法去重的场景） #

如果必须保留重复选项，或者浏览器仍存在滚动问题，可以通过JavaScript监听键盘事件，手动追踪选中项并触发滚动（借助页面中<datalist>内的option元素，间接引导浏览器下拉弹窗同步滚动）：

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

<script>
const input = document.getElementById('ice-cream-choice');
const datalist = document.getElementById('ice-cream-flavors');
const options = Array.from(datalist.querySelectorAll('option'));
let currentIndex = -1;

input.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
        e.preventDefault();
        
        // 更新选中项索引
        currentIndex = e.key === 'ArrowDown' 
            ? (currentIndex + 1) % options.length 
            : currentIndex <= 0 ? options.length - 1 : currentIndex - 1;
        
        // 设置输入框值为选中项的值
        input.value = options[currentIndex].value;
        
        // 让页面中的对应option滚动到视图，间接同步浏览器下拉弹窗的滚动
        options[currentIndex].scrollIntoView({ block: 'nearest' });
    }
});

// 点击输入框时重置选中索引
input.addEventListener('click', () => {
    currentIndex = -1;
});
</script>

注：该方案通过手动控制选中逻辑，利用页面内option的scrollIntoView方法触发浏览器下拉弹窗的滚动同步，不同浏览器的兼容性略有差异，但主流现代浏览器均可正常运行。

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