自己写了个自动补全输入的js，但是按上下键的时候无法滚动

.box { padding: 2px; border: 1px solid #A3A3A3; width: 359px; height: 16px; background: #FFF; position: relative; float: left }
 
.list { width: 363px; position: absolute; background: #FFF; border: 1px solid #000; left: -1px; top: 21px; list-style: none; height: 212px; display: none; overflow: auto }
 
.list li { padding: 2px; font-size: 14px; cursor: default; float: none; margin-right: 0 }
 
.list li i { font-style: normal; color: red }
 
.list li.hover { background: rgba(39, 133, 231, 0.30); font-weight: bold }

$(function(){
var $box = $('.box'), $area = $('#area'), $list = $('.list');
$area.keydown(function (event) { 
    if (event.which == 38) {
        event.preventDefault();
        keychang("up")
    } else if (event.which == 40) {
        event.preventDefault();
        keychang();
    }
});
 
function keychang(up) {
    var hover = $list.children('.hover'), index = hover.index();
    if (up == "up") {
        if (index == 0) {
            hover.removeClass('hover');
            $list.children('li:last').addClass('hover');
        } else {
            hover.removeClass('hover').prev().addClass('hover');
        }
    } else {
        if (index == ($list.children('li').length - 1)) {
            hover.removeClass('hover');
            $list.children('li:first').addClass('hover');
        } else {
            hover.removeClass('hover').next().addClass('hover');
        }
    }
})

<div class="box">
<input type="text" name="area" id="area"/>
<ul class="list">
<li area_id="858" class=""><i>黄</i>北坪乡</li>
<li area_id="917" class="hover"><i>黄</i>壁庄镇</li>
<li area_id="936" class=""><i>黄</i>各庄镇</li>
<li area_id="1019" class="">东<i>黄</i>坨镇</li>
<li area_id="1315" class=""><i>黄</i>金堤乡</li>
<li area_id="1437" class=""><i>黄</i>沙镇</li>
<li area_id="1472" class=""><i>黄</i>粱梦镇</li>
<li area_id="1717" class="">西<i>黄</i>村镇</li>
<li area_id="1781" class=""><i>黄</i>石口乡</li>
<li area_id="2207" class=""><i>黄</i>石崖乡</li>
<li area_id="858" class=""><i>黄</i>北坪乡</li>
<li area_id="917" class=""><i>黄</i>壁庄镇</li>
<li area_id="936" class=""><i>黄</i>各庄镇</li>
<li area_id="1019" class="">东<i>黄</i>坨镇</li>
<li area_id="1315" class=""><i>黄</i>金堤乡</li>
<li area_id="1437" class=""><i>黄</i>沙镇</li>
<li area_id="1472" class=""><i>黄</i>粱梦镇</li>
<li area_id="1717" class="">西<i>黄</i>村镇</li>
<li area_id="1781" class=""><i>黄</i>石口乡</li>
<li area_id="2207" class=""><i>黄</i>石崖乡</li>
</ul>
</div>

jquery有办法判断某个元素是否被挡住么？

怎么才能把滚动条滚动到正好的位置？？

ul的高度是212px而且是overflow: auto的，按上下键选中li已经实现了，可是按上下键的时候滚动条不动，我希望能按上下键的时候判断如果当选择的li超出了ul的范围的话就滚动到可以看到选中的li的位置