前端 判断某个元素是否在可视范围

基础知识:

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

返回值是一个DOMRect对象,包含了一组用于描述边框的只读属性——left、top、right和bottom,单位为像素。

getBoundingClientRect(来源网络,侵删)


代码如下:

   var windowHeight = window.innerHeight;

    var rect = element.getBoundingClientRect();

    var top = rect.top;

    var bottom = rect.bottom;

    var isTopInWindow = 0 < top && top < windowHeight;

    var isBottomInWindow = 0 < bottom && bottom <= windowHeight;

    return isTopInWindow || isBottomInWindow;

demo:前端 判断某个元素是否在可视范围

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容