scrollTop nie działa z przepełnieniem: właściwość auto w css

Question

Przeproś jeśli to pytanie jest powtarzające się, ale nie mogłem znaleźć właściwej odpowiedzi na StackOverflow.

używam następujące właściwości w moim klasy css:

.panel{ 
    background: rgba(203, 203, 210, 0.15); 
    position: relative; 
    float: right; 
    ... 
    overflow: auto; 
} 

Gdy używam $('body').animate({scrollTop: 10}, 500); funkcję jQuery przewijać stronę do góry, to nie działa. Kiedy zamieniam wartość auto na coś takiego jak "widoczny" lub "dziedziczą", to działa. Struktura strony wymaga jednak właściwości przepełnienia.

Każdy pomysł?

Answer 1

Jedynym sposobem mogę przezwyciężyć problem z overflow:auto rosła wysokość stronie tymczasowej i zresetować wysokość do jego pierwotnej wartości, co następuje:

$('.panel').css({"min-height":"200%"}); 
$('body').animate({scrollTop: 10}, 500); 
$('.panel').css({"min-height":"100%"}); 

Answer 2

Aby zrobić to zgodnie ze specyfikacją bez usuwania wartości przepełnienia, można zawinąć przewijany plik .panel w opakowaniu i użyć go. Wziąłem twój kod i dodałem własne w tym kodzie pióra, jedyną różnicą jest to, że opakowanie jest dodawane i js odpowiednio dostosowane.

https://codepen.io/c0un7z3r0/pen/Emgdbr

$(".button").click(function(){ 
    $("html, body").animate({ scrollTop: 0 }, "slow"); 
}); 

Przewiń w dół, aby wybrać przycisk, który przenosi Cię z powrotem na górę, będziesz pamiętać, że CSS jest taka sama, jak pisał w swoim przykładzie. Mam nadzieję, że to pomoże.