页面重载后如何保存input绑定的datalist下拉选项的滚动位置

原生<datalist>的下拉弹窗是浏览器内置渲染的控件，不属于页面DOM树，你无法直接获取它的滚动元素、监听滚动事件，也无法主动控制它的滚动位置，这是你之前写的div模拟滚动的代码不生效的根本原因。

自定义的下拉组件完全由页面DOM节点构成，可控性极强，你之前写的滚动位置监听、存储、恢复逻辑都可以直接复用，还可以根据需求自定义样式、交互效果，避免不同浏览器原生datalist的表现差异。
你可以手动用div+ul/li模拟下拉结构，也可以直接使用主流UI组件库的下拉选择组件，只需要保留原有选中后自动提交表单的逻辑即可。

如果不想替换原生datalist，可以利用原生datalist会自动滚动到和input值匹配的选项的特性，间接实现滚动位置恢复：

1. 每次用户选中选项提交表单前，把选中的版本号存在localStorage中
2. 页面重载后给input绑定focus事件，触发时先把input的值临时设为上次存储的选中值，触发datalist自动滚动到对应选项，再根据你的需求处理input的显示值

实现代码 #

在你的页面中加入以下JS代码即可：

document.addEventListener('DOMContentLoaded', () => {
  const versionInput = document.getElementById('versionId');
  
  // 选中选项时存储当前选中值
  versionInput.addEventListener('change', () => {
    if (versionInput.value.trim()) {
      localStorage.setItem('lastSelectedVersion', versionInput.value);
    }
  });

  // input聚焦时恢复datalist滚动位置
  versionInput.addEventListener('focus', () => {
    const lastVer = localStorage.getItem('lastSelectedVersion');
    if (!lastVer) return;

    // 临时赋值触发datalist滚动到对应选项
    versionInput.value = lastVer;

    // 如果需要input保持为空、显示placeholder，保留下面这段代码即可，无视觉闪烁
    // 如果希望默认显示上次选中值，直接删除这段代码即可
    requestAnimationFrame(() => {
      versionInput.value = '';
      // 触发input事件保证下拉框正常弹出
      versionInput.dispatchEvent(new Event('input'));
    });
  });
});

该方案兼容Chrome、Edge、Firefox等主流浏览器，可满足绝大多数场景需求。

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