使用 Chrome 和 native sticky，我在选择时遇到问题，在以下情况下我必须点击两次才能选择一个选项:
选择在粘性容器中
粘性容器处于粘性状态(已执行向下滚动)
如何在不事先关注 Google Chrome 的情况下将下拉选择减少到 1 个点击？
这是一个 fiddle 来说明这个错误: https://jsfiddle.net/ckkpwyf6/
HTML:
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{
font-family: Arial;
}
form{
float: right;
display: block;
position: -webkit-sticky;position: sticky;
top: 10px;
width: 30%;
}
div{
display: block;
width: 70%;
}
p{margin:10px 0;}
</style>
<title></title>
</head>
<body>
<main>
<form action="#" method="GET">
<input placeholder="Lorem ipsum" value="Lorem ipsum" type="text">
<select name="number">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</form>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus iaculis tortor elit, ut porttitor lectus ultrices vel. Donec eget hendrerit lorem. Proin nulla dolor, consequat tempus efficitur sit amet, aliquet in massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc pretium nunc et eros iaculis dapibus. Aliquam quis orci molestie tortor eleifend mattis nec sed est. Curabitur dignissim tincidunt augue, quis consequat elit rhoncus quis.</p>
<p>Nunc placerat a lacus in tristique. Nam eleifend porta mi, id rhoncus massa accumsan quis. Integer velit nisl, consequat id volutpat ac, scelerisque eget nibh. Pellentesque eget efficitur felis. Morbi ac tincidunt lacus, nec tempus velit. Mauris porta leo id magna ultricies consequat. In vestibulum lacus vel egestas sagittis. Vivamus rutrum porta libero, non dignissim augue viverra id. Phasellus faucibus felis eu orci aliquet, eu malesuada mi venenatis.</p>
<p>Nam et purus lacinia, euismod felis sit amet, rhoncus odio. Ut blandit ullamcorper quam, non eleifend tellus venenatis vitae. Etiam lacinia eros non aliquet varius. Donec sit amet pulvinar ante. Vestibulum justo dolor, lobortis vitae sem in, vehicula varius felis. Nullam efficitur dignissim augue sit amet sodales. Morbi vel ornare est. Integer sodales in arcu sed pellentesque. Cras quis placerat metus. Vestibulum vulputate rutrum ornare.</p>
<p>Morbi pulvinar consectetur quam, ac semper risus malesuada vel. Aliquam a finibus massa. Nunc interdum mauris velit, non pulvinar velit vehicula sit amet. Ut dictum nec sapien a vestibulum. Cras maximus metus sagittis dui eleifend, ac rhoncus elit dapibus. Nam ut risus vitae nisl egestas mattis et eu elit. Donec in dolor urna. Sed eu lobortis nisi, a vehicula ipsum. Quisque fermentum ac felis ac vehicula. Fusce eget accumsan risus, a fringilla odio. Suspendisse quis tristique felis. Duis consectetur ex sed tincidunt vestibulum. Vivamus vel varius ex.</p>
<p>Vivamus faucibus venenatis maximus. In vitae sapien eu orci rhoncus maximus at vel est. Cras scelerisque dui egestas, molestie justo sit amet, efficitur justo. Integer egestas est fermentum sem rutrum elementum. Pellentesque sagittis a mi a feugiat. Phasellus sed suscipit eros. Vestibulum sed turpis bibendum, porta purus fringilla, rutrum sem. Ut nibh sem, facilisis vel porttitor sed, efficitur ut mauris. In eget pretium eros. Aenean nec orci a massa congue consectetur quis non ligula. Nam vestibulum, tellus ut faucibus pretium, purus libero rhoncus nisl, vel facilisis arcu leo aliquet risus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus iaculis tortor elit, ut porttitor lectus ultrices vel. Donec eget hendrerit lorem. Proin nulla dolor, consequat tempus efficitur sit amet, aliquet in massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc pretium nunc et eros iaculis dapibus. Aliquam quis orci molestie tortor eleifend mattis nec sed est. Curabitur dignissim tincidunt augue, quis consequat elit rhoncus quis.</p>
<p>Nunc placerat a lacus in tristique. Nam eleifend porta mi, id rhoncus massa accumsan quis. Integer velit nisl, consequat id volutpat ac, scelerisque eget nibh. Pellentesque eget efficitur felis. Morbi ac tincidunt lacus, nec tempus velit. Mauris porta leo id magna ultricies consequat. In vestibulum lacus vel egestas sagittis. Vivamus rutrum porta libero, non dignissim augue viverra id. Phasellus faucibus felis eu orci aliquet, eu malesuada mi venenatis.</p>
<p>Nam et purus lacinia, euismod felis sit amet, rhoncus odio. Ut blandit ullamcorper quam, non eleifend tellus venenatis vitae. Etiam lacinia eros non aliquet varius. Donec sit amet pulvinar ante. Vestibulum justo dolor, lobortis vitae sem in, vehicula varius felis. Nullam efficitur dignissim augue sit amet sodales. Morbi vel ornare est. Integer sodales in arcu sed pellentesque. Cras quis placerat metus. Vestibulum vulputate rutrum ornare.</p>
<p>Morbi pulvinar consectetur quam, ac semper risus malesuada vel. Aliquam a finibus massa. Nunc interdum mauris velit, non pulvinar velit vehicula sit amet. Ut dictum nec sapien a vestibulum. Cras maximus metus sagittis dui eleifend, ac rhoncus elit dapibus. Nam ut risus vitae nisl egestas mattis et eu elit. Donec in dolor urna. Sed eu lobortis nisi, a vehicula ipsum. Quisque fermentum ac felis ac vehicula. Fusce eget accumsan risus, a fringilla odio. Suspendisse quis tristique felis. Duis consectetur ex sed tincidunt vestibulum. Vivamus vel varius ex.</p>
<p>Vivamus faucibus venenatis maximus. In vitae sapien eu orci rhoncus maximus at vel est. Cras scelerisque dui egestas, molestie justo sit amet, efficitur justo. Integer egestas est fermentum sem rutrum elementum. Pellentesque sagittis a mi a feugiat. Phasellus sed suscipit eros. Vestibulum sed turpis bibendum, porta purus fringilla, rutrum sem. Ut nibh sem, facilisis vel porttitor sed, efficitur ut mauris. In eget pretium eros. Aenean nec orci a massa congue consectetur quis non ligula. Nam vestibulum, tellus ut faucibus pretium, purus libero rhoncus nisl, vel facilisis arcu leo aliquet risus.</p>
</div>
</main>
</body>
</html>
最佳答案
您可以通过向元素 onmouseover="this.focus()" 添加属性“onmouseover”来绕过该错误
关于css - 选择必须在粘住时双击 chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45329204/