如何在 Chrome 中滚动时隐藏数据列表？答案

【问题标题】：How to hide datalist on scroll in Chrome?如何在 Chrome 中滚动时隐藏数据列表？
【发布时间】：2021-04-14 23:10:58
【问题描述】：

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

点击输入，会出现datalist，
Scroll the container,
好奇为什么数据列表没有隐藏，尽管输入不再可见。

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

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

更新：这个错误已经是filed、twice。等待 Chrome 团队的解决方案！

【问题讨论】：

可能是一个错误或 chrome 希望它实现的方式。您可以在滚动时为输入设置模糊以摆脱它
@Huangism，这实际上是我问的问题 - 这是一个错误还是只是一些开发人员的决定。在第一种情况下，我至少可以尝试编写错误报告。
我认为你应该提交一份错误报告，看看他们如何回应

标签： html css

【解决方案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

【讨论】：