前端必知:如何判断元素出现在视口内 |
您所在的位置:网站首页 › js关闭窗口代码 › 前端必知:如何判断元素出现在视口内 |
要检测一个元素是否可见或者两个元素是否相交的需求场景有这些: 图片懒加载——当图片滚动到可见时才进行加载 内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多,而无需用户操作翻页,给用户一种网页可以无限滚动的错觉 检测广告的曝光情况——为了计算广告收益,需要知道广告元素的曝光情况 在用户看见某个区域时执行任务或播放动画 1. 知识铺垫:确定浏览器窗口的尺寸有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari: window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 复制代码对于 Internet Explorer 8、7、6、5: document.documentElement.clientHeight document.documentElement.clientWidth 复制代码或者混杂模式(没有)下: document.body.clientHeight document.body.clientWidth 复制代码实用的 JavaScript 方案(涵盖所有浏览器): var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 复制代码一些其他 Window 方法: window.open() - 打开新窗口 window.close() - 关闭当前窗口 window.moveTo() - 移动当前窗口 window.resizeTo() - 调整当前窗口的尺寸 复制代码scrollTop(): 方法设置或返回被选元素的垂直滚动条位置。 当用于返回位置时: 该方法返回==第一个==匹配元素的滚动条的垂直位置。 当用于设置位置时: 该方法设置==所有==匹配元素的滚动条的垂直位置。 scrollHeight属性: 滚动的总高度,指的是包含滚动内容的元素大小(元素内容的总高度)。 window.scrollBy(x,y):x轴,y轴的一次滚动的距离。 2. 判断元素是否出现在视口: 方法一:offsetTop - scrollTop |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |