2017-07-26 35 views
1

使用本地粘的時候,我有一個選擇,我有一個問題能夠選擇一個選項前點擊兩次時:選擇有使用Chrome雙擊粘

  • 選擇處於粘容器

  • 粘性容器被粘(已經執行了向下滾動)

如何在不事先關注谷歌瀏覽器的情況下將下拉選擇縮小爲1點?

這裏是爲了說明的bug一個小提琴: 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> 
+0

否e似乎想要解決這個問題,因爲它更多地與鉻怪癖模式相比,而不是代碼。你在這個例子中所做的100%可以使用'position:fixed;'實現,因爲它從頭開始變得「​​粘滯」 –

+0

當然這裏的小提琴真的只是指出錯誤,我有這個問題的頁面要複雜得多,固定的位置不是一種選擇。 – Spir

回答