Jak zapobiec przeglądaniu przewijania w przeglądarce po kliknięciu pola wyboru?

Za każdym razem, gdy kliknę pole wyboru, okno przeglądarki (firefox) zostanie przewinięte w górnej części ekranu.
W jaki sposób można temu zapobiec, więc po kliknięciu pola wyboru okno przeglądarki nie zostanie przewinięte?
Oto kod znaleziony tutaj http://jsfiddle.net/zAFND/6/
Dziękuję.Jak zapobiec przeglądaniu przewijania w przeglądarce po kliknięciu pola wyboru?

<html> 
    <head> 
     <title>Test</title> 
     <style> 
      div label input { 
       margin-right: 100px; 
      } 

      body { 
       font-family:sans-serif; 
      } 

      #ck-button { 
       margin: 4px; 
       background-color: #EFEFEF; 
       border-radius: 4px; 
       border: 1px solid #D0D0D0; 
       overflow: auto; 
       float: left; 
      } 

      #ck-button { 
       margin: 4px; 
       background-color: #EFEFEF; 
       border-radius: 4px; 
       border: 1px solid #D0D0D0; 
       overflow: auto; 
       float: left; 
      } 

      #ck-button:hover { 
       margin: 4px; 
       background-color: #EFEFEF; 
       border-radius: 4px; 
       border: 1px solid red; 
       overflow: auto; 
       float: left; 
       color: red; 
      } 

      #ck-button label { 
       float: left; 
       width: 4.0em; 
      } 

      #ck-button label span { 
       text-align: center; 
       padding: 3px 0px; 
       display: block; 
      } 

      #ck-button label input { 
       position: absolute; 
       top: -20px; 
      } 

      #ck-button input:checked + span { 
       background-color: #911; 
       color: #fff; 
      } 
     </style>  
</head> 
    <body> 
     <br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <div id="ck-button"> 
      <label> 
       <input type="checkbox" value="1"><span>red</span> 
      </label> 
     </div> 
    </body>

Źródło

2013-07-31 themis

Problemem jest to reguła:

#ck-button label input { 
    position:absolute; 
    top:-20px; 
}

Po kliknięciu na etykiecie przeglądarka próbuje skupić wejście pokrewnych. W Twoim przypadku element pola wyboru znajduje się pod numerem na górze strony, nawet poza oknem podglądu. Dlatego Firefox próbuje przewinąć tam.

myślę, że można go rozwiązać w ten sposób, dodając:

#ck-button label { 
    display: block; 
    position: relative; 
    overflow: hidden; 
}

Demo

Try before buy

Edit

Jak wróciłem do tej odpowiedzi dziś i w odniesieniu do Heisenberg's: On p omawia problem, który może wystąpić przy użyciu skrajnych wartości i dodaje inne rozwiązanie, które zasadniczo ma takie samo dziwactwo jak moje.

Aby uniknąć tych ewentualnych dziwactw, oto inne możliwe rozwiązanie, po prostu ukrywając dane wejściowe. Nie ma to wpływu na funkcjonalność, ponieważ możesz przetestować poniższy link.

CSS

#ck-button label input { 
    display: none; 
}

Demo

Second demo

Źródło

2013-07-31 15:18:30 insertusernamehere

tak, dziękuję, że zadziałało. – themis

Znalazłem twoją odpowiedź, ponieważ korzystałem z widżetu z oceną gwiazd, który używał -9999 dla pozycji jego przycisków opcji. Dzięki! –

można ukryć swój wkład checkbox tak:

Źródło

2013-07-31 15:39:55

zaakceptowana odpowiedź nie jest całkowicie prawdziwa. Działa, ale nie we wszystkich przypadkach.

Jeśli używasz wspólnego css do ukrycia elementów (prawdopodobnie -999em lub podobnych) w atrybucie "top", w tym przypadku pozycja: względna nie ma nic wspólnego, ponieważ zawsze -999em będzie znacznie wyższa niż rzutnia .

Przyjęta odpowiedź działa dobrze, ponieważ "góra" to tylko -20 pikseli. Spróbuj ustawić go na wyższą liczbę, a zobaczysz problem.

Tak więc, rozwiązaniem nie jest ustawienie względnej pozycji. Myślę, że poprawny sposób jest tylko na ustawić ujemną wartość na lewej pozycji (nie na górze).

Wypróbuj. :)

Źródło

2013-09-12 12:52:07 Heisenberg

Rzeczywiście to działa. zaakceptowana odpowiedź dodała najwyższe dopełnienie, a ta rozwiązała to, dzięki! – hansaplast

Dzięki za wskazanie problemu w [moja odpowiedź] (http://stackoverflow.com/a/17974351/1456376). Zaktualizowałem go odpowiednio. Również twoje rozwiązanie jest inną możliwością, ma takie samo dziwactwo jak moje. Spróbuj ustawić wartość "left" bardzo wysoko, np .: '# ck-button label input {position: absolute; left: -10000px; } '. Możesz to zobaczyć w tym [demo on jsfiddle] (http://jsfiddle.net/rnxaf4ve/). Nie będziesz mógł kliknąć przycisku w Webkit-Browsers (Chrome i Safari), a także nie będzie działał w Firefoksie zgodnie z wymaganiami. – insertusernamehere

Jak zapobiec przeglądaniu przewijania w przeglądarce po kliknięciu pola wyboru?

Odpowiedz

Powiązane problemy