精华内容
下载资源
问答
  • 如何判断元素在哪个区
    千次阅读
    2020-12-20 14:46:05

    小程序的比较简单:

    dom.top 元素距离视窗顶部的距离 注意随着滚动变化。

    dom.height 元素的高度。

    windowHeight 视窗的高度。

    如果元素的top在视窗高度范围内 就证明在可见区域。

    if( el.top0 ){ 就可以了判断了 }

    再严谨一些 加上元素自身的高度。

    if( el.top 0 ){在范围内

    }

    变量通过以下两个方式获取://屏幕的高度

    var SystemInfo = wx.getSystemInfoSync()  console.log(SystemInfo.windowHeight)

    //元素的高度

    var query = wx.createSelectorQuery();    //选择id

    var that = this;

    query.select('#yuyue').boundingClientRect(function (rect) {       console.log('元素的:'+rect.top)

    更多相关内容
  • 判断元素是否可视区域

    千次阅读 2018-10-15 19:28:14
    前言 图片懒加载网站运用图片比较多的时候回用到,图片懒加载可以让不可视区域的图片不去加载,避免一...判断一个元素是否可视区域,我们有通常有两种办法,第一种是:使用元素的 getBoundingClientRect 属性...

    前言

    图片懒加载在网站运用图片比较多的时候回用到,图片懒加载可以让不在可视区域的图片不去加载,避免一次性加载过多图片导致请求阻塞,提高网站加载速度和用户体验。如果要实现图片懒加载需要去判断图片是否在可视区域。

    判断方法

    判断一个元素是否在可视区域,我们有通常有两种办法,第一种是:使用元素的 getBoundingClientRect 属性的 top 值和页面的 clientHeight进行对比, 如果top的值小于 clientHeight表示元素在可视区域内。这种方式的缺点是需要监听scroll事件,第二种是利用高级特性 Intersection Observer 来判断元素是否可见,这种方式不用监听scroll事件,元素可见变调用回调,在回调里面处理。

    getBoundingClientRect

    用法: rectObject = object.getBoundingClientRect()

    返回一组用于描述元素的只读属性-left, top,right,botton, width, height,除了width和height外的属性都是相当于于视口左上角而言的。bottom和right于正常的有所不同

    clipboard.png

    当计算边界矩形时,会考虑视口区域(或其他可滚动元素)内的滚动操作,也就是说,当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们的值是相对于视口的,而不是绝对的)。如果你需要获得相对于整个网页左上角定位的属性值,那么只要给top、left属性值加上当前的滚动位置(通过window.scrollX和window.scrollY),这样就可以获取与当前的滚动位置无关的值。

    为了跨浏览器兼容,请使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。不能访问这些属性的脚本可以使用下面的代码:

    // For scrollX
    (((t = document.documentElement) || (t = document.body.parentNode))
      && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
    // For scrollY
    (((t = document.documentElement) || (t = document.body.parentNode))
      && typeof t.scrollTop == 'number' ? t : document.body).scrollTop

    Intersection Observer

    用法:

    参考:https://juejin.im/post/5bbc60...

    展开全文
  • 上公式:元素距离顶部高度(elOffsetTop) >= dom滚动高度(docScrollTop)并且元素距离顶部高度(elOffsetTop) < (dom滚动高度 + 视窗高度)上代码:一个多图表 懒加载 例子:chart-data="chartData":chart-id=...

    上公式:

    元素距离顶部高度(elOffsetTop) >= dom滚动高度(docScrollTop)

    并且元素距离顶部高度(elOffsetTop) < (dom滚动高度 + 视窗高度)

    上代码:

    一个多图表 懒加载 例子

    :chart-data="chartData"

    :chart-id="chartId">

    import DefectFlightPatternChart from '~/components/metrics/defect-flight-pattern-chart'

    export default {

    components: {

    DefectFlightPatternChart

    },

    props: {

    projectUuid: { type: String, default: '' },

    chartIndex: { type: Number, default: 0 }

    },

    data () {

    return {

    chartData: {},

    chartLoading: false,

    isLoaded: false,

    boxId: 'dashboard-chart-box-',

    chartId: 'dashboard-chart-'

    }

    },

    mounted () {

    this.chartId = this.chartId + this.chartIndex + Math.floor(Math.random() * 1000)

    this.boxId = this.chartId + '-box'

    this.$nextTick(() => {

    this.scroll()

    window.addEventListener('scroll', this.scroll)

    })

    },

    destroyed () {

    window.removeEventListener('scroll', this.scroll, false)

    },

    methods: {

    async getChartData () {

    try {

    this.isLoaded = true

    this.chartLoading = true

    const { data } = await this.$axios.get(`/api/v1/projects/${this.projectUuid}/issues/trend`)

    this.chartData = data

    this.chartLoading = false

    } catch (e) {

    console.log(e)

    }

    },

    async scroll () {

    const elOffsetTop = document.getElementById(this.boxId).offsetTop

    const docScrollTop = document.documentElement.scrollTop - 230

    if (elOffsetTop >= docScrollTop && elOffsetTop < (docScrollTop + window.innerHeight) && !this.isLoaded) {

    await this.getChartData()

    }

    }

    }

    }

    觉得有帮助的小伙伴点个赞支持下~

    觉得有帮助的小伙伴点个赞支持下~

    展开全文
  • 面试之如何判断一个元素是否可视区域中?面试官:如何判断一个元素是否可视区域中?一、用途二、实现方式offsetTop、scrollTop注意getBoundingClientRectIntersection Observer创建观察者传入被观察者三、案例...

    面试官:如何判断一个元素是否在可视区域中?

    一、用途

    可视区域即我们浏览网页的设备肉眼可见的区域,如下图

    在日常开发中,我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值(例如 100 px),从而实现一些常用的功能,例如:

    • 图片的懒加载
    • 列表的无限滚动
    • 计算广告元素的曝光情况
    • 可点击链接的预加载

    二、实现方式

    判断一个元素是否在可视区域,我们常用的有三种办法:

    • offsetTop、scrollTop

    • getBoundingClientRect

    • Intersection Observer

    offsetTop、scrollTop

    offsetTop,元素的上外边框至包含元素的上内边框之间的像素距离,其他offset属性如下图所示:

    下面再来了解下clientWidthclientHeight

    • clientWidth:元素内容区宽度加上左右内边距宽度,即clientWidth = content + padding
    • clientHeight:元素内容区高度加上上下内边距高度,即clientHeight = content + padding

    这里可以看到client元素都不包括外边距

    最后,关于scroll系列的属性如下:

    • scrollWidthscrollHeight 主要用于确定元素内容的实际大小

    • scrollLeftscrollTop 属性既可以确定元素当前滚动的状态,也可以设置元素的滚动位置

      • 垂直滚动 scrollTop > 0
      • 水平滚动 scrollLeft > 0
    • 将元素的 scrollLeftscrollTop 设置为 0,可以重置元素的滚动位置

    注意

    • 上述属性都是只读的,每次访问都要重新开始

    下面再看看如何实现判断:

    公式如下:

    el.offsetTop - document.documentElement.scrollTop <= viewPortHeight
    

    代码实现:

    function isInViewPortOfOne (el) {
        // viewPortHeight 兼容所有浏览器写法
        const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 
        const offsetTop = el.offsetTop
        const scrollTop = document.documentElement.scrollTop
        const top = offsetTop - scrollTop
        return top <= viewPortHeight
    }
    

    getBoundingClientRect

    返回值是一个 DOMRect对象,拥有left, top, right, bottom, x, y, width, 和 height属性

    const target = document.querySelector('.target');
    const clientRect = target.getBoundingClientRect();
    console.log(clientRect);
    
    // {
    //   bottom: 556.21875,
    //   height: 393.59375,
    //   left: 333,
    //   right: 1017,
    //   top: 162.625,
    //   width: 684
    // }
    

    属性对应的关系图如下所示:

    当页面发生滚动的时候,topleft属性值都会随之改变

    如果一个元素在视窗之内的话,那么它一定满足下面四个条件:

    • top 大于等于 0
    • left 大于等于 0
    • bottom 小于等于视窗高度
    • right 小于等于视窗宽度

    实现代码如下:

    function isInViewPort(element) {
      const viewWidth = window.innerWidth || document.documentElement.clientWidth;
      const viewHeight = window.innerHeight || document.documentElement.clientHeight;
      const {
        top,
        right,
        bottom,
        left,
      } = element.getBoundingClientRect();
    
      return (
        top >= 0 &&
        left >= 0 &&
        right <= viewWidth &&
        bottom <= viewHeight
      );
    }
    

    Intersection Observer

    Intersection Observer 即重叠观察者,从这个命名就可以看出它用于判断两个元素是否重叠,因为不用进行事件的监听,性能方面相比getBoundingClientRect会好很多

    使用步骤主要分为两步:创建观察者和传入被观察者

    创建观察者

    const options = {
      // 表示重叠面积占被观察者的比例,从 0 - 1 取值,
      // 1 表示完全被包含
      threshold: 1.0, 
      root:document.querySelector('#scrollArea') // 必须是目标元素的父级元素
    };
    
    const callback = (entries, observer) => { ....}
    
    const observer = new IntersectionObserver(callback, options);
    

    通过new IntersectionObserver创建了观察者 observer,传入的参数 callback 在重叠比例超过 threshold 时会被执行`

    关于callback回调函数常用属性如下:

    // 上段代码中被省略的 callback
    const callback = function(entries, observer) { 
        entries.forEach(entry => {
            entry.time;               // 触发的时间
            entry.rootBounds;         // 根元素的位置矩形,这种情况下为视窗位置
            entry.boundingClientRect; // 被观察者的位置举行
            entry.intersectionRect;   // 重叠区域的位置矩形
            entry.intersectionRatio;  // 重叠区域占被观察者面积的比例(被观察者不是矩形时也按照矩形计算)
            entry.target;             // 被观察者
        });
    };
    

    传入被观察者

    通过 observer.observe(target) 这一行代码即可简单的注册被观察者

    const target = document.querySelector('.target');
    observer.observe(target);
    

    三、案例分析

    实现:创建了一个十万个节点的长列表,当节点滚入到视窗中时,背景就会从红色变为黄色

    Html结构如下:

    <div class="container"></div>
    

    css样式如下:

    .container {
        display: flex;
        flex-wrap: wrap;
    }
    .target {
        margin: 5px;
        width: 20px;
        height: 20px;
        background: red;
    }
    

    container插入1000个元素

    const $container = $(".container");
    
    // 插入 100000 个 <div class="target"></div>
    function createTargets() {
      const htmlString = new Array(100000)
        .fill('<div class="target"></div>')
        .join("");
      $container.html(htmlString);
    }
    

    这里,首先使用getBoundingClientRect方法进行判断元素是否在可视区域

    function isInViewPort(element) {
        const viewWidth = window.innerWidth || document.documentElement.clientWidth;
        const viewHeight =
              window.innerHeight || document.documentElement.clientHeight;
        const { top, right, bottom, left } = element.getBoundingClientRect();
    
        return top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight;
    }
    

    然后开始监听scroll事件,判断页面上哪些元素在可视区域中,如果在可视区域中则将背景颜色设置为yellow

    $(window).on("scroll", () => {
        console.log("scroll !");
        $targets.each((index, element) => {
            if (isInViewPort(element)) {
                $(element).css("background-color", "yellow");
            }
        });
    });
    

    通过上述方式,可以看到可视区域颜色会变成黄色了,但是可以明显看到有卡顿的现象,原因在于我们绑定了scroll事件,scroll事件伴随了大量的计算,会造成资源方面的浪费

    下面通过Intersection Observer的形式同样实现相同的功能

    首先创建一个观察者

    const observer = new IntersectionObserver(getYellow, { threshold: 1.0 });
    

    getYellow回调函数实现对背景颜色改变,如下:

    function getYellow(entries, observer) {
        entries.forEach(entry => {
            $(entry.target).css("background-color", "yellow");
        });
    }
    

    最后传入观察者,即.target元素

    $targets.each((index, element) => {
        observer.observe(element);
    });
    

    可以看到功能同样完成,并且页面不会出现卡顿的情况

    参考文献

    • https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
    • https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API
    • https://github.com/febobo/web-interview

    案例代码HTML

    <!DOCTYPE html>
    <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">
      <title>Document</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
    
        .wrapper {
          height: 2000px;
          width: 200px;
        }
    
        .top-box {
          width: 200px;
          height: 1500px;
          background-color: #ccc;
        }
    
        .target {
          width: 200px;
          height: 200px;
          background-color: aquamarine;
        }
        .bottom-box{
          width: 200px;
          height: 1000px;
          background-color: #ccc;
        }
      </style>
    </head>
    
    <body>
      <div class="wrapper">
        <div class="top-box">盒子</div>
        <div class="target">盒子</div>
        <div class="bottom-box">盒子</div>
      </div>
      <script>
        /*
          注意:getBoundingClientRect()获取的值
          当页面上下发生滚动的时候,top 与 bottom 属性值都会随之改变
          当页面左右发生滚动的时候,left 与 right 属性值都会随之改变
    
          如果一个元素在视窗之内的话,那么它一定满足下面四个条件:
            top 大于等于 0
            left 大于等于 0
            bottom 小于等于视窗高度
            right 小于等于视窗宽度
        */
        function isInViewPort(element) {
          const viewWidth = window.innerWidth || document.documentElement.clientWidth;
          const viewHeight = window.innerHeight || document.documentElement.clientHeight;
          const {
            top,
            right,
            bottom,
            left,
          } = element.getBoundingClientRect();
          console.log(viewWidth, viewHeight, top, left, right, bottom);
    
          return (
            top >= 0 &&
            left >= 0 &&
            right <= viewWidth &&
            bottom <= viewHeight
          );
        }
    
        // getBoundingClientRect 返回值是一个 DOMRect对象,拥有left, top, right, bottom, x, y, width和height属性
        const wrapper = document.querySelector('.wrapper');
        const target = document.querySelector('.target');
        const clientRect = target.getBoundingClientRect();
        console.log(clientRect);
    
        window.addEventListener('scroll', () => {
          if (isInViewPort(target)) {
            target.style.background = "red"
          } else {
            target.style.background = "aquamarine"
          }
        })
      </script>
    </body>
    
    </html>
    

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • js如何判断一个元素在可视区域内

    千次阅读 2021-11-08 21:06:04
    总结 一个元素content满足以下条件时,可判断可视区域: const isShow=()=>{ return (content.offsetTop + content.offsetHeight > scrollTop) && (content.offsetTop ); }; 二、用getBoundingClientRect 0....
  • IntersectionObserver介绍 intersection-observer npm包实际运用
  • 一、用途可视区域即我们浏览网页的设备肉眼可见的区域,如下图日常开发中,我们经常需要判断目标元素是否视窗之内或者和视窗的距离小于一个值(例如 100 px),从而实现一些常用的功能,例如...
  • js判断元素是否出现可视区内

    千次阅读 2018-08-30 10:09:51
    ).offset().top//元素距离网页顶部的距离 $(window).scrollTop()//网页卷出的高度 $(window).height()//浏览器可视窗口的高度   window.onscroll = function () { let top = $(".footer").offset()....
  • 1、获取可使用窗口高度 const { windowHeight } = wx.getSystemInfoSync() ...3、判断元素是否可视区域内 // windowHeight = top(目标元素刚进入可视区域) // windowHeight - top = height(目标元素完全进入可
  • 当页面滚动时,元素随页面滚动,该元素距离顶部的距离 let cardOffsetTop = $("#card").offset().top; 获取 card 的高度(card 包含外边距) let cardOuterHeight = $("#card").outerHeight(true); //这个方法...
  • JS判断元素到顶部并固定

    千次阅读 2022-04-20 13:12:24
    当页面滚动290像素后 class为userCentLeft的元素悬浮 $(document).scroll(function () { // 滚动到上面 隐藏 $(window).scroll(function () { let top = $(window).scrollTop()//窗口滚动距离 if (top >= ...
  • Java的List如何判断元素类别

    千次阅读 2021-02-12 14:33:59
    Java的List如何判断元素类别、输入流的回退,以及Autocad中参照块的坐标变换。关于最近有关CAD数据的项目的一点总结1.关于Java中的List用法。它可以存多种不同的元素,但取元素时怎么判断该元素是哪一类呢?取...
  • 个性签名: 生如夏花,逝如冬雪;人生如此,何悔何怨。 前言: 经常需要计算元素的大小...这里一次性做个总结,以用来判断元素是否可视区域以及用原生js简单实现懒加载。文末有个简单的懒加载实现的demo,有需要...
  • js判断元素是否可视区域内

    千次阅读 2017-05-18 10:18:24
    判断可视区内的元素为每个元素添加显示隐藏
  • 判断网页某一个元素是否可视

    千次阅读 2017-03-28 16:32:03
    } 这是判断一个div是否是...//其实判断这个元素的滚动条距离和当前可视高度加上滚动条的距离,如果元素的滚动条距离小于实际的滚动条距离说明出现视线中了 var top=odiv.offsetTop; var height=odiv.offsetHeig
  • js判断获取元素是否可视区域

    万次阅读 2019-07-09 13:52:00
    js判断获取元素是否可视区域 执行var ab = $(".nav_dh")[0]; isElementInViewport(ab) function isElementInViewport(el) { //获取元素是否可视区域 var rect = el.getBoundingClientRect(); return ( ...
  • jq判断一个元素是否可视范围内

    千次阅读 2017-08-19 10:08:43
    场景重现比如视频页面中播放,当用户向下滚动页面时,假如视频元素不可见了,那么我们应该停止播放 相似的场景还有图片懒加载简单思路$(() => { // 只要将当前元素相对于窗口的高度+当前元素自身的高度和窗口的...
  • 观察者模式监听判断dom元素是否可视区域内 本项目是使用vue3 setup的写法。 页面挂载完毕后设置observer监听:
  • jQuery判断元素是否显示与隐藏

    千次阅读 2018-11-11 08:18:58
    jQuery判断元素是否显示与隐藏
  • 有时还要进一步知道,元素是全部都显示可视,还是有部分可视部分隐藏内容。有时还要进一步知道,隐藏内容的那一部分是占多大的大小。so,来聊聊如何获取元素的大小和位置信息。 计...
  • 假设此元素为 #item,先说几个关键的属性: 1.jQuery(‘#item’).offset().top #item 的绝对偏移量,指#item的实际尺寸(即不包括外边框margin)的上边界到页面顶端的距离.这个值不随窗口滚动而改变 2.jQuery(‘#item...
  • 判断两个List元素是否相同;

    万次阅读 2019-05-15 18:06:14
    → 集合中的元素必须重写equals方法自行判断元素是否相同 * 哈希地址相同 返回true * 如果两个参数都为空,则返回true * 如果有一项为空,则返回false * 如果数据长度不相同,则返回false * 集合1包含集合2中的...
  • ArrayList中判断是否存在某个元素是用contains(Object obj)方法,而 contains()方法是依赖于equals方法的。 众说周知,object里的equals()方法其实是判断两个对象的地址值是否相等,也就相当于这两个对象是否是同...
  • 前端开发中,有时需要判断某个元素是否浏览器的可视区域内,或者是否已经滚动出了可视区域.首先想到的便是javascript操作,原生方法自然可以,不过Jquery已经封装了一些属性,使用起来更方便些,我们这里就讨论这种...
  • vue 判断组件进入可视区域

    千次阅读 2020-09-14 18:47:21
    1、mounted 监听 监听元素是否进入/移出可视区域 window.addEventListener("scroll", this.scrollHandle, true); // 监听 监听元素是否进入/移出可视区域 2、 methods 执行事件 scrollHandle() { const offset = ...
  • js判断一个元素距离顶部的距离

    万次阅读 2017-09-09 11:13:28
    //获得elem元素距相对定位的父元素的top elem=elem[0].offsetParent;//将elem换成起相对定位的父元素 while(elem!=null){//只要还有相对定位的父元素  /*获得父元素 距他父元素的top值,累加到...
  • threejs 判断对象是否可视

    千次阅读 2019-04-26 15:44:46
    threejs 中判断一个对象(vector坐标)是否相机的可视内 let tempV = vector.applyMatrix4(camera.matrixWorldInverse).applyMatrix4(camera.projectionMatrix); if ( (Math.abs(tempV.x) > 1) || ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 183,924
精华内容 73,569
关键字:

如何判断元素在哪个区

友情链接: MultiPrint.rar