js判断元素是否出现在视口内

最新推荐文章于 2024-06-17 16:43:29 发布
最新推荐文章于 2024-06-17 16:43:29 发布
阅读量3.7k 收藏 5
点赞数 3 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>判断元素是否在视口内</title>
  <style>
    ul li{list-style: none;padding: 20px}
    li:nth-child(even){background: green}
    li:nth-child(odd){background: yellowgreen} 
  </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
  <li>32</li>
  <li>33</li>
  <li>34</li>
  <li>35</li>
  <li>36</li>
  <li>37</li>
  <li>38</li>
  <li>39</li>
  <li>40</li>
  <li>41</li>
  <li>42</li>
  <li>43</li>
  <li>44</li>
  <li>45</li>
  <li>46</li>
  <li>47</li>
  <li>48</li>
  <li>49</li>
  <li>50</li>
  <li>51</li>
  <li>52</li>
  <li>53</li>
  <li>54</li>
  <li>55</li>
  <li>56</li>
  <li>57</li>
  <li>58</li>
  <li>59</li>
  <li>60</li>
  <li>61</li>
  <li>62</li>
  <li>63</li>
  <li>64</li>
  <li>65</li>
  <li>66</li>
  <li>67</li>
  <li>68</li>
  <li>69</li>
  <li>70</li>
  <li>71</li>
  <li>72</li>
  <li>73</li>
  <li>74</li>
  <li>75</li>
  <li>76</li>
  <li>77</li>
  <li>78</li>
  <li>79</li>
  <li>80</li>
  <li>81</li>
  <li>82</li>
  <li>83</li>
  <li id="box">84</li>
  <li>85</li>
  <li>86</li>
  <li>87</li>
  <li>88</li>
  <li>89</li>
  <li>90</li>
  <li>91</li>
  <li>92</li>
  <li>93</li>
  <li>94</li>
  <li>95</li>
  <li>96</li>
  <li>97</li>
  <li>98</li>
  <li>99</li>
  <li>100</li>
</ul>
</body>
<script>
  // 某个元素是否出现在视口内
  (function () {
    function GetRect (element) {
      var rect = element.getBoundingClientRect() // 距离视窗的距离
      var top = document.documentElement.clientTop ? document.documentElement.clientTop : 0 // html元素对象的上边框的宽度
      var left = document.documentElement.clientLeft ? document.documentElement.clientLeft : 0
      return {
        top: rect.top - top,
        bottom: rect.bottom - top,
        left: rect.left - left,
        right: rect.right - left
      }
    }
    var $box = document.getElementById('box')
    var divH = $box.offsetHeight // div高度
    var windowH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight // 浏览器高度兼容写法
    window.onscroll = function () {
      var obj = GetRect($box)
      if (obj.top >= windowH) { // 在视口之下
        console.log('84在视口之下')
      }
      if (obj.top < windowH && obj.bottom >= windowH) { // 正在出现
        console.log('84正在出现')
      }
      if (obj.top > 0 && obj.top < windowH && obj.bottom > 0 && obj.bottom < windowH) { // 正在视口中
        console.log('84正在视口中')
      }
      if (obj.top <= 0 && obj.bottom <= divH && obj.bottom > 0) { // 正在离开视口
        console.log('84正在离开视口')
      }
      if (obj.bottom <= 0) { // 已经离开视口
        console.log('84在视口之上')
      }
    }
  })()
</script>
</html>

 

I-T枭
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript判断元素是否进入视口
qq_38160125的博客
05-28 2480
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
js判断是否对象自身为空
小马甲
12-10 1036
如何判断一个对象为空？先上结论：判断一个对象是否为空时，使用方法最为完美。今天我们来聊聊几种经常使用的方法，以及在不同的场景下我们如何去使用。本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见，一起加油☕。
如何判断一个标签是否在浏览器窗口里了--原生态JS实现
九天翔龙的技术博客
10-07 1349
有时候做一些特效需要判断标签是否在浏览器窗口里，这样可以产生一些动画之类的。 关键就在于如何用JavaScript判断标签是否在窗口里？ 有HTML如下，写了三个DIV，分别id为 s1,s2,s3: <div class="section s1" id="s1"> <div class="box"> <h1>你好...
js判断dom元素是否出现在当前视口内
JulyNight的博客
04-26 258
【代码】js判断dom元素是否出现在当前视口内。
元素出现在视图中时触发的js
最新发布
gaotlantis的博客
06-17 663
Intersection Observer API 是一种异步观察目标元素与其祖先元素（或顶级文档视口）交叉状态变化的机制。懒加载图片或其他资源实现无限滚动效果统计元素在视图中的可见性触发动画效果Intersection Observer API 提供了一种高效的方式来检测元素是否出现在视图中，并触发相应的操作。通过合理地使用该API，可以显著提高页面性能和用户体验。希望本文能帮助你理解并应用 Intersection Observer API，在实际项目中灵活实现各种效果。
js实现页面跳转的几种方式
一世辛劳的专栏
04-02 444
点击打开链接 第一种：                window.location.href="login.jsp?backurl="+window.location.href;      第二种：         alert("返回");     window.history.back(-1);     第三种：         window.
Js获取元素相对适口位置
HZKang的博客
10-20 477
getBoundingClientRect()方法返回一个矩形对象，包含四个属性：left、top、right和bottom，分别表示元素各边与页面上边和左边的距离。用法如下 let rect = element.getBoundingClientRect(); element为当前元素，获取其相对其位置数据的代码如下：rect.top rect.left rect.right rect.bot
impression监测网页元素是否出现在视口内的JS库可用于监测广告的曝光
08-10
"impression"就是这样一个专门用于监测网页元素在视口内出现情况的JS库，它可以帮助我们准确地追踪和记录广告或其他关键内容的可见性。 **一、impression库的工作原理** impression库基于浏览器的Intersection ...
JS判断指定dom元素是否在屏幕内的方法实例
11-28
标题中的“JS判断指定DOM元素是否在屏幕内的方法实例”是指一种JavaScript技术，用于检测DOM元素是否在用户当前查看的浏览器窗口（也称视口）内。这种技术常用于实现滚动交互效果，例如，当元素进入视口时触发动画或...
vue-check-view-一个检查元素是否在视口中的插件。 快速，小巧，没有依赖关系，实时演示。-Vue.js开发
05-27
检查元素是否在视口中。 具有SSR支持的Vue.js 2插件，无需依赖。 DEMO简单插件，用于检查屏幕上元素的位置。检查元素是否在视口中。 具有SSR支持的Vue.js 2插件，无需依赖。 DEMO简单插件，用于检查屏幕（视口）上...
react-native-inviewport:检测组件是否在设备视口中
04-30
检测组件是否在设备视口中。 我基于以下内容： : 进行了一些细微修改。 安装 sudo npm react-native-inviewport@latest --save 用法示例 假设您已经设置了组件，这是一个简单的示例。 checkVisible = (isVisible) ...
inviewport:检查 dom 元素是否完全包含在视口中
07-02
检查 dom 元素是否完全包含在视口中 例子 var inViewport = require ( 'inviewport' ) ; console . log ( inViewport ( document . querySelector ( 'div' ) ) ) ; 安装 $ npm install inviewport 应用程序接口 在...
如何判断一个元素是否在可视区域中？
TongJ_的博客
02-19 1919
一、用途 可视区域即我们浏览网页的设备肉眼可见的区域，如下图 在日常开发中，我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值（例如 100 px），从而实现一些常用的功能，例如： 图片的懒加载列表的无限滚动计算广告元素的曝光情况可点击链接的预加载 二、实现方式 判断一个元素是否在可视区域，我们常用的有三种办法： offsetTop、scrollTop getBoundingClientRect Intersection Observer 方法一 offsetTop、scrollT
js如何判断一个元素在可视区域内
chenxiaoyi0207的博客
11-08 9714
下方通用示例html的dom和公共js代码： <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g
【前端知识之JS】如何判断一个元素是否在可视区域中
weixin_44337386的博客
06-09 5110
本系列主要整理前端面试中需要掌握的知识点。本节介绍如何判断一个元素是否在可是区域中
js 监听元素是否出现在可视区域--IntersectionObserver
KID963931445的博客
02-22 1744
IntersectionObserver
面试官问：如何判断一个元素是否在可视区域？
p1967914901的博客
07-27 2029
可以理解为将元素看出一个矩形，该对象包含了该矩形的位置、大小信息，可以获得页面中元素的左，上，右和下分别相对浏览器视窗的位置。很多时候，目标元素不仅会随着窗口滚动，还会在容器里面滚动（比如在iframe窗口里滚动）。有时，我们希望某些静态资源（比如图片），只有用户向下滚动，它们进入视口时才加载，这样可以节省带宽，提高网页性能。这样设置以后，不管是窗口滚动或者容器内滚动，只要目标元素可见性变化，都会触发观察器。返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的。...
IntersectionObserver简单介绍及使用，监听元素是否在可视区域内
05-22 2073
IntersectionObserver 之前就有所了解，但是一直没有用，当时觉得浏览器兼容性不好，直接用onscroll监听也能实现相关功能，但是随着浏览器支持性越来越好，这个属性到迄今为止，可以用在大部分的正式项目中了，对于提升性能和用户体验，起到一定作用。IntersectionObserver支持两个参数：callback是当被监听元素的可见性变化时，触发的回调函数options是一个配置参数，可选，有默认的属性值。
前端必知：如何判断元素出现在视口内
清颖的博客
01-30 2903
要检测一个元素是否可见或者两个元素是否相交的需求场景有这些： - 图片懒加载——当图片滚动到可见时才进行加载 - 内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多，而无需用户操作翻页，给用户一种网页可以无限滚动的错觉 - 检测广告的曝光情况——为了计算广告收益，需要知道广告元素的曝光情况 - 在用户看见某个区域时执行任务或播放动画
移动端滑动的时候判断某个元素是否出现
05-19
3. 在 `scroll` 事件回调函数中，通过 `getBoundingClientRect` 方法获取元素相对于视口的位置信息，判断元素是否出现在视口中。 以下是示例代码： ```javascript const targetEl = document.querySelector('#...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值