Scrollbar „przeskakuje” do innej lokalizacji z funkcją przewijania pojemnika, gdy pole jest kliknięty

Question

Oto moje skrzypce:

https://jsfiddle.net/85ef12m9/

mam tej klasy

.scrollable{ 
    overflow: auto; 
    max-height:400px; 
} 

i muszę powiedzieć bardzo długi div z wiele elementów:

<div class=scrollable> 
    <div> 
    <input type="checkbox" id="test0" /> 
    <label for="test0">Red</label> 
    </div> 
    <div> 
    <input type="checkbox" id="test1" /> 
    <label for="test1">Red</label> 
    </div> 
    .... 

Kiedy klikam element, powiedz te st51 mój pasek przewijania przeskakuje w dół do położenia elementu, tak jakby nie był zawarty w przewijanym div. Ktoś ma pojęcie, dlaczego tak się dzieje?

Answer 1

Okazuje się, że odpowiedź jest prosta, wystarczy dodać:

.scrollable{ 
    position: relative; 
} 

https://jsfiddle.net/161pnkzr/1/

Ja również stałe swój zamykanie </div> „s w jsfiddle (pierwotnie były one <div/>).

Numer referencyjny: https://github.com/Dogfalo/materialize/issues/992