html - 如何在 Chrome 中滚动隐藏数据列表？

Question

在 Chrome 中，如果 input[list] 和 datalist 放在一个可滚动的容器中，滚动后 datalist 将保持在同一位置，查看 the example :

点击输入，出现数据列表，

Scroll the container ,

好奇为什么尽管输入不再可见，但数据列表没有隐藏。

就是这样。 Firefox 和其他浏览器可以毫无问题地处理这种情况 - datalist 在滚动时隐藏。

所以，问题是:有没有办法在滚动时隐藏数据列表，即使它位于 Chrome 的嵌套容器中？

更新:这个错误已经是 filed , twice .等待 Chrome 团队解决!

Answer 1

尝试添加一些 JavaScript:

document.querySelector('.main').addEventListener('scroll', function() {
  let isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
  if (isChrome) {
    document.querySelector('input').blur();
  }
}, false);

JSFiddle version