Клавиатура перекрывает редактируемый элемент

При клике на один из div в списке, иногда клавиатура перекрывает его. Если убрать position: fixed у #ellist1- все норм. Но position: fixed необходим. scrollTop (js код ниже) не всегда решает проблему.

 <div id="ellist1" style="position:fixed; overflow: auto; width:100%; height: 100%; background-color:#FFFFCC;z-index:1">
 <div id="ellist" align="center" style="padding-top:30%;padding-left:3%;padding-bottom:6%;overflow-wrap: break-word;width:70%;">
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>
    <div style="padding-top:15;padding-bottom:15" contenteditable="true">dddddddddd</div>

</div>
</div>
<script>
$('#ellist').children().on("click", function() {
if (window.innerHeight > 500 && $(this).index() > 3) {
    var offset_diff = window.innerHeight * 2.5;
    $('#ellist1').animate({scrollTop: $(this).offset().top - offset_diff}, 
800);
}
})
</script>