当前位置：
  1. 首页
  2. 前端
  3. CSS
  4. 正文

如何判断元素是否到达可视区域

CSS 1 355

以图片显示为例：

  • window.innerHeight 是浏览器可视区的高度；
  • document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离；
  • imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）；
  • 内容达到显示区域的：img.offsetTop < window.innerHeight + document.body.scrollTop;

img

上一篇 对 CSS 工程化的理解
下一篇 z-index属性在什么情况下会失效

发表评论

后才能评论

评论(1)

1 CSS 基础面试题阅读指南（必看）
2 css 的渲染层合成是什么 浏览器如何创建新的渲染层
3 css 优先级是怎么计算的
4 css 怎么开启硬件加速(GPU 加速)
5 CSS中可继承与不可继承属性有哪些
6 display的属性值及其作用
7 display的block、inline和inline-block的区别
8 隐藏元素的方法有哪些
9 link和@import的区别
10 transition和animation的区别
11 display:none与visibility:hidden的区别
12 伪元素和伪类的区别和作用
13 对requestAnimationframe的理解
14 对盒模型的理解
15 为什么有时候⽤translate来改变位置而不是定位
16 li 与 li 之间有看不见的空白间隔是什么原因引起的 如何解决
17 CSS3中有哪些新特性
18 替换元素的概念及计算规则
19 常见的图片格式及使用场景
20 对 CSSSprites 的理解
21 什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片
22 对line-height 的理解及其赋值方式
23 CSS 优化和提高性能的方法有哪些
24 CSS预处理器/后处理器是什么 为什么要使用它们
25 ::before 和 :after 的双冒号和单冒号有什么区别
26 单行、多行文本溢出隐藏
27 Sass、Less 是什么 为什么要使用他们
28 对媒体查询的理解
29 对 CSS 工程化的理解
30 如何判断元素是否到达可视区域
31 z-index属性在什么情况下会失效
32 常见的CSS布局单位
33 px、em、rem的区别及使用场景
34 两栏布局的实现
35 如何根据设计稿进行移动端适配
36 对Flex布局的理解及其使用场景
37 响应式设计的概念及基本原理
38 为什么需要清除浮动 清除浮动的方式
39 使用 clear 属性清除浮动的原理
40 对BFC的理解，如何创建BFC
41 什么是margin重叠问题 如何解决
42 元素的层叠顺序
43 display、float、position的关系
44 absolute与fixed共同点与不同点
45 对 sticky 定位的理解
46 设置小于12px的字体
47 CSS3新增伪类有那些
48 CSS选择器有哪些 哪些属性可以继承
49 margin和padding分别适合什么场景使用
50 png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp
51 列举一些CSS框架
52 使用CSS Sprites的好处
53 overflow属性在CSS中被用于什么
54 CSS的特异性是什么意思
55 什么是块级格式化上下文（BFC），如何工作
56 这段CSS代码会产生什么影响 {box-sizing：border-box;}
57 相对，固定，绝对和静态定位的元素有什么区别
58 什么是文件分割，何时使用
59 介绍一下标准的css的盒子模型 低版本IE的盒子模型有什么不同
60 Render Tree和CSSOM Tree的区别
61 重排与重绘
62 position 中的 relative 和 absolute 的定位原点是什么
63 float的使用
64 flex弹性布局
65 常见居中方案
66 如何居中p 如何居中一个浮动元素 如何让绝对定位的p居中
67 absolute的containing block计算方式跟正常流有什么不同
68 制作一个访问量很高的大型网站，你会如何来管理所有CSS文件,js 与图片
69 视差滚动效果
70 css div 垂直水平居中，并完成 div 高度永远是宽度的一半（宽度可以不指定）
71 CSS实现自适应正方形、等宽高比矩形
72 IE6 BUG的解决方法
共 72 篇文章