Js如何判断元素是否在屏幕可视范围内

更新日期: 2019-04-21阅读: 4.5k标签: 屏幕

假设目标元素:#element

var element= $('#element');

该元素相对于文档顶部的偏移距离

var elementOffsetTop = $("#element").offset().top;

获取该元素的高度

var elementOuterHeight = $("#element").outerHeight(true); //这个方法可以传递一个参数true, 如果传递表示需要求出的高度含有外边距

获取页面滚动的距离

var winScrollHeight = $(window).scrollTop();

浏览器可见区域的高度:

var winHeight = $(window).height();

那应该如何确定元素在可见区域内呢?
假设当元素的上边框刚好出现在浏览器的底部时(零界点)

winScrollHeight + winHeight = elementOffsetTop

此时,如果winScrollHeight 增加,则元素在屏幕内出现;如果winScrollHeight 减少,则元素在屏幕内消失。
翻译成程序就是:

winScrollHeight > elementOffsetTop-winHeight //元素出现
winScrollHeight <= elementOffsetTop-winHeight //元素消失

假设当元素的下边框刚好出现在浏览器的顶部时(零界点)

elementOffsetTop + elementOuterHeight = winScrollHeight

此时,如果winScrollHeight 增加,则元素在屏幕内消失;如果winScrollHeight 减少,则元素在屏幕内出现。
翻译成程序就是:

elementOffsetTop + elementOuterHeight > winScrollHeight //元素出现
elementOffsetTop + elementOuterHeight <= winScrollHeight //元素消失

实现代码

if((winScrollHeight > elementOffsetTop-winHeight) && (winScrollTop < elementOffsetTop + elementOuterHeight)) {
     console.log("出现了")
} else {
     console.log("消失了")
}

可应用场景是惰性加载,当元素首次出现在屏幕中时,加载特定的资源。


链接: https://www.fly63.com/article/detial/2954

JS,Jquery获取各种屏幕的宽度和高度

这篇文章介绍了JS和jquery获取各种屏幕的宽度和高度的代码,有需要的朋友可以参考一下:网页可见区域宽: document.body.clientWidth,网页可见区域高: document.body.clientHeight

js监听屏幕方向如何第一次默认不监听

家有时候有需求在屏幕方向改变的时候重新执行某个渲染函数,以获取方向改变后的实际宽高,但是首次加载的执行函数要在其他地方执行,这时候可以加一个flag的状态值,默认为false

Vue移动端右滑屏幕返回上一页

有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验。Vue touch directive是一个用于移动设备操作指令的轻量级的VUE组件。使用它可以轻松实现屏幕触控、滑动触发事件,提高用户体验

横竖屏检测 orientation resize matchMedia

这在家办公也不让闲着点。虽然说需求提出来了,但是我们身为一个前端er,还是要有自己的想法呀,我们要统计一波数据看看到底有多少人在横屏使用我们的产品。

20行JS代码实现屏幕录制

在开发中可能有遇到过屏幕录制的需求,无论是教学、演示还是游戏录制,都需要通过屏幕录制来记录和分享内容。一般在App内H5页基于客户端能力实现的较多,现在浏览器中的 MediaRecorder 也提供了这种能力

判断元素是否在可视范围内

getBoundingClientRect会受到transform的影响。比如你的元素设置了transform:scale(2), 那么getBoundingClientRect返回的width会是元素实际宽度的2倍,top等位置信息也会因为元素尺寸变化而发生变化.

当我遇见了强制横屏签字的需求...

在前一阶段的工作中,突然接到了这个需求:手写签批的页面在移动端竖屏时强制页面横屏展示进行签字,一开始我觉着只要将页面使用 CSS3 的 transform 进行 rotate 一下就可以了

如何保持屏幕常亮_Js实现设备保持唤醒状态

JavaScript 中的一些新功能非常值得期待,唤醒锁定 API 就是其中之一。它允许我们与主机系统进行交互,可以帮助开发人员使用 JavaScript 指示操作系统保持屏幕唤醒状态!

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!