Question

在Chrome中，如果将带有数据列表的输入[列表]放在可滚动的容器中，则数据列表在滚动后将保留在同一位置，请检出the example：

单击输入，将显示数据列表，
ntdll!NtWaitForSingleObject+0x14 KERNELBASE!WaitForSingleObjectEx+0x9f dci_tester!cppdex::WindowsSyncEvent::WaitForSignal+0x2e dci_tester!cppdex::testing::IpcDispatcher::WaitForSignalFromProcess+0x25 dci_tester!MasterIPC::WaitForAllClients+0x4d dci_tester!dci_tester::testcases::ClientLoadUnloadStressTestcase::RunMasterForScenarioOverTimeWithAllConnections+0xa2 dci_tester!dci_tester::testcases::ClientLoadUnloadStressTestcase::ConnectionsMasterProcessRoutine+0x1d1 dci_tester!dci_tester::testcases::DciMultiProcessTestcase::ProcessRoutine+0x1c1 dci_tester!cppdex::testing::MultiProcessTestcase::Run+0x6b dci_tester!cppdex::testing::TestcaseManager<cppdex::testing::TestcaseDefaultCommandParser>::RunTestcase+0x175 dci_tester!ExecutableMain+0x64a dci_tester!wmain+0x68 dci_tester!invoke_main+0x22 dci_tester!__scrt_common_main_seh+0x11d kernel32!BaseThreadInitThunk+0x14 ntdll!RtlUserThreadStart+0x21，
很好奇为什么即使输入不再可见，数据列表也没有隐藏。

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

因此，问题是：有什么方法可以隐藏滚动中的数据列表，即使它位于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

如何在Chrome中滚动显示时隐藏数据列表？

1 个答案: