请问如何判断元素距离可视区底部的距离？

Question

我想实现按上下键，实现选择的功能，但是如果被选择的元素如果到了可视区底部时，再按下键需要页面向下滚动，可是怎么判断元素里可视区顶部或底部的距离呢？
谢谢！

Answer 1

如果你的每一行的高度都是固定的，那就去改变滚动条的scrollTop吧.

思路1：
scrollTop = index * 每一行的高度 （这样会使选中的数据永远在第一个位置）

思路2： 判断元素是否不可见，无论是向下不可见还是向上不可见，我们都需要调整滚动条的高度
向下不可见： (index+1) * height - popHeight(下拉框高度) > scrollTop
向上不可见： index * height < scrollTop

Answer 2

function checkShow(ele) { // 传入一个元素的jq对象
    var scrollTop = $(window).scrollTop();  //即页面向上滚动的距离
    var windowHeight = $(window).height(); // 浏览器自身的高度
    var offsetTop = ele.offset().top;  //目标元素相对于document顶部的位置

    if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的
        return true;
    }
    return false;
}