如何判断一个元素是否在可视区域内_移动端判断元素是否滚动出可视区-优快云博客

本文介绍了一种方法，用于检测移动端页面上的视频是否处于浏览器可见区域内，并据此控制视频的播放状态。通过计算元素位置与滚动距离的关系，可以判断视频是否超出可视范围，从而实现视频在滑出屏幕时自动暂停。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在制作移动端的页面时，当页面上有视频并且正在播放时，如何让视频在消失的时候停止播放，之后便针对这个问题进行解决。
首先，我们先了解一下几个概念，先假设该元素为$(“#main”)

1.元素距离页面顶部的距离
var mainOffsetTop = $(“#main”).offset().top;

2.元素的高度
var mainHeight = $(“#main”).height();

3.页面滚动的距离
var windowScrollTop = $(window).scrollTop();

4.浏览器可见区域的高度
var windowHeight = $(window).height();

下面我们就来看一下如何判断该元素是否在可视区域内呢？在窗口上下滚动的情况下, 一个页面元素的状态有下面3种：
1.向上滚动超出可见区域
2.向下滚动超出可视区域
3.在可视区域内

第一种情况   由于元素随页面向上滚动, 整个页面滚动的距离  大于 （元素距离页面顶部的距离 + 元素本身的高度 ）-> 超出
第二种情况   由于元素随页面向下滚动, 整个页面滚动的距离  小于 （元素距离页面顶部的距离 - 浏览器可见区域高度 ）-> 超出