原生js如何判断元素出现在可视区

元素出现在可视区

  scorll滑动的距离>=当前元素距离浏览器最顶端的高度+当前元素自身的高度-当前可视区的高度

触底

  scorll滑动的距离>=当前scroll总高度-当前可视区的高度

原文地址:https://www.cnblogs.com/wuqilang/p/11253618.html

时间: 2024-11-02 13:04:08

原生js如何判断元素出现在可视区的相关文章

原生Js封装的弹出框

<!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>原生Js封装的弹出框-弹出窗口-页面居中-多状态可选</title> <style type="text/css"&

判断元素出栈,入栈顺序的合法性

问题:元素出栈,入栈顺序的合法性.如入栈的序列(1,2,3,4,5),出栈序列为(4,5,3,1,2) 定义一个栈sp,入栈序列为str1,出栈序列为str2,长度分别为size1和size2.如果两个序列为空或长度不等,则不合法,针对长度相等且不为空的两个序列进行判断. 先将str1中第一个元素入栈,然后通过循环使str1后移. 1.如果当前栈为空且入栈序列不为空,则入栈序列str1后移,sp入栈. 2.如果栈顶元素不等于出栈序列且入栈序列不为空,则入栈序列str1后移,sp入栈. 3.如果栈

判断元素出栈、入栈顺序的合法性

输入两个整数序列,第一个整数序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出序列??? 解决该问题很直观的想法就是建立一个辅助栈,根据弹出序列知第一个希望被弹出的数字为X,由于压入栈的顺序由压栈序列确定,所以此时应该把压入序列中X之前的 数字都依次压人到辅助栈里面去.如果下一个被弹出的数字刚好是栈顶数字,那么直接将其弹出,如果下一个弹出的数字不在栈顶,我们则把压栈序列中还没有入栈的数字(并且在该弹出数字之前的数字)压入辅助栈,如果所有的压栈序列中数字都遍历了仍然没有找到下一个弹出的数字,那

原生js获取Html元素的实际宽度高度

第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度. 小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性.注意如果不是写在行内styl

通过原生JS实现为元素添加事件

自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流 代码: var bindEvent = { 'add':function(id,type,fn,isBubble){ var dom = document.getElementById(id); if(!isBubble) isBubble=false; if(dom.addEventListenner){ dom.

(三)原生JS实现 - 插件 - 弹出层

创建遮罩层 1 _createCover: function() { 2 var newMask = document.createElement("div"); 3 newMask.id = this._mark; 4 newMask.style.position = "absolute"; 5 newMask.style.zIndex = "100"; 6 _scrollWidth = Math.max(document.body.scrol

原生js之同级元素添加移除class

<div class="tp-bottom-content"> <div class="tp-nav"> <ul id="nav"> <li class="active"><span>快速跟进</span></li> <li ><span>跟进</span></li> <li><

原生JS获取操作元素

操作元素自定义属性 h5方法 设置语法:<p data-自定义属性名 = '自定义属性值'></p> 属性名想叫什么就叫什么,可以用多个 -连接 <p data-名称-名称 = '自定义属性值'></p> 获取语法**:element.dataset.自定义属性名如果属性名用多个-连接 ,获取时应将属性名以-为分割符,驼峰方式获取 无兼容性方法 设置语法**:属性名想叫什么就叫什么,可以用多个 -连接 操作元素所有(标准.自定义)属性 获取元素属性 语法:e

原生js获取子元素、给元素增加div

//鼠标移入移出动画 window.onload = function () { var el = document.createElement('div'); el.className = "bg"; var obj_lis = document.getElementById("list").getElementsByTagName("a"); for (i = 0; i < obj_lis.length; i++) { obj_lis[