jQuery 判断某个元素是否在可见区域内

位置:首页>文章>详情   分类: 教程分享 > WEB基础   阅读(1021)   2023-03-28 11:29:14

jQuery 判断某个元素是否在可见区域内

这个功能是经常在用的, 但自己没有注意过总结, 下面就总结在这里. 希望对自己和有需要的朋友有帮助!

我采用一个题目的形式, 帮助自己记忆.

题目:  假定某个元素, $("#item"), 实现元素在可见区域时打印'出现了', 该元素在不可见区域时打印'消失了'.

需要的知识点(以下知识点纯属大白话),

 

当拖动滚动条时, 这个元素随着页面滚动, 该元素距离页面顶部的距离:  
 

var itemOffsetTop = $("#item").offset().top;
$("#item")元素的高度:
var itemOuterHeight = $("#item").outerHeight(); //这个方法可以传递一个参数true, 如果传递表示需要求出的高度含有外边距, 否则不含有. 具体视需求而定.
页面滚动的距离:
var winScrollHeight = $(window).scrollTop();
浏览器可见区域的高度:
var winHeight = $(window).height();
知道了以上的知识点, 我们来分析一下, 如何确定该元素在可见区域内呢?
/*  思考:
    在窗口上下滚动的情况下, 一个页面元素的状态有下面3种
    ① 向上滚动超出可见区域
    ② 向下滚动超出可视区域
    ③ 在可视区域内
*/
// 情况1 -> 由于元素随页面向上滚动, 整个页面滚动的距离大于元素顶部偏移量 + 元素本身的高度 -> 超出
// 情况2 -> 由于元素随页面向下滚动, 整个页面滚动的距离小于元素顶部偏移量 - 浏览器可见区域高度 -> 超出

具体实现:
var $win = $(window);
var itemOffsetTop = $("#item").offset().top;
var itemOuterHeight = $("#item").outerHeight();
var winHeight = $win.height();
$win.scroll(function () {
    var winScrollTop = $win.scrollTop();
    if(!(winScrollTop > itemOffsetTop+itemOuterHeight) && !(winScrollTop < itemOffsetTop-winHeight)) {
        console.log('出现了');
    } else {
        console.log('消失了');
    }
})
标签: jquery 可见区域
地址:https://www.leftso.com/article/634.html

相关阅读

jQuery 判断某个元素是否在可见区域内这个功能是经常在用的, 但自己没有注意过总结, 下面就总结在这里. 希望对自己和有需要的朋友有帮助!我采用一个题目的形式, 帮助自己记忆.题目:  假定...
jQuery select 获取值$title(方法一:) let val=$('#selectId').val(); //获取选中值 $title(方法二:) let val=$('#sele...
jQuery checkbox获取选中状态let check=$(this).is(':checked') console.log(check); // true /false注意通过form表...
Jquery 对form表单对象直接使用reset()方法是无法生效得,而且可能报错没有reset()这个方法
问题描述JQuery_ajax formData 上传文件报错:Uncaught TypeError: Illegal invocationJquery 版本2.1.4$.ajax({ ty...
jquery方式input radio根据值选中元素$(currentForm).find('input:radio[name=specifyColorTag][value="0"]').pro...
​1.假设初始化的chosen如下$('#chosenId').chosen({ width: '98%',//其他参数参考官网设置 }); 2.设置...
清空input 类型为file的文件选择常见的方法分两类一. javascript 方式清空file选择首先获取dom元素filevar file=document.getElementById...
问题描述最近一个项目遇到Bootstrap Table pageList 配置不生效,配置多个选项后无法还是无法弹出选择
 bootstrapValidator 创建/重置/手动验证使用详解  bootstrapValidator 初始化  function initValidator() { $("#d...