精华内容
下载资源
问答
  • 判断元素是否可视区域

    千次阅读 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...

    展开全文
  • 判断元素是否可视区域内

    千次阅读 2017-08-01 13:36:08
    getBoundingClientRect() function isElementInViewport (el, offset = 0) { const box = el.getBoundingClientRect(), top = (box.top >= 0), left = (box.left >= 0),

    getBoundingClientRect()

     function isElementInViewport (el, offset = 0) {
            const box = el.getBoundingClientRect(),
                  top = (box.top >= 0),
                  left = (box.left >= 0),
                  bottom = (box.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offset),
                  right = (box.right <= (window.innerWidth || document.documentElement.clientWidth) + offset);
            return (top && left && bottom && right);
        }
    展开全文
  • js判断元素是否可视区域内

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

    判断元素是否在可视区域内,在的话显示,否则隐藏

    请点击demo地址

    需求:
    为每个页面元素添加效果,当元素滚动到可视区域内时缓慢显示并有一定位移效果

    分析:
    如果想为每个元素都添加能添加这种效果,有一个统一的class名字是最好操作的,
    那么如何判断有哪些元素在可视区,哪些不在可视区而确定是否让其显示,

    代码:
    css代码,给每一个叫CfadeInUp的元素添加动画,设置好animation的动画效果,动画名字要用js来添加;

    @keyframes CfadeInUp
            {
                from {transform: translateY(50px);}
                to {transform: translateY(0px);
                    opacity:1;}
            }
            .CfadeInUp{
                width: 100%;
                height: 100px;
                background-color: #000;
                margin-bottom: 100px;
                opacity: 0;
                animation: 1s ease  forwards  alternate;
            }

    js代码

    (function animateUp(){
        var obj = $('.CfadeInUp');
        var objH= $('.CfadeInUp').outerHeight();
        var num = [];
        var wH  = $(window).height();
        var wScrollTop = $(window).scrollTop();
    
        // 获取页面所有obj的top位置,存入数组
        for(var i=0; i<obj.length;i++){
            num.push(obj.eq(i).offset().top+(objH/3));
        }
        // console.log(num)
        // 循环数组,判断obj的位置是否在可视区中
        function judgeTop(){
            for(var j=0; j<num.length;j++){
                if (num[j] >= wScrollTop && num[j] < (wScrollTop+wH)) {
                    obj.eq(j).css({
                        'animation-name':'CfadeInUp',
                        'opacity':'1'
                    });
                }
            }
        };
        // 页面初始化时先调用一次
        judgeTop();
    
        // 触发滚动事件调用判断函数
        $(window).scroll(function(event) {
            wH = $(window).height();
            wScrollTop = $(window).scrollTop();
            judgeTop();
        });
    })();
    展开全文
  • js判断元素是否出现可视区内

    千次阅读 2018-08-30 10:09:51
    ).offset().top//元素距离网页顶部的距离 $(window).scrollTop()//网页卷出的高度 $(window).height()//浏览器可视窗口的高度   window.onscroll = function () { let top = $(".footer").offset()....

    $(".footer").offset().top//元素距离网页顶部的距离

    $(window).scrollTop()//网页卷出的高度

    $(window).height()//浏览器可视窗口的高度

     

    window.onscroll = function () {

    let top = $(".footer").offset().top;

    let dw_height = ($(window).scrollTop() + $(window).height()) - top <= 0 ? 0 : ($(window).scrollTop() + $(window).height()) - top;

    if (top >= $(window).scrollTop() && top < ($(window).scrollTop() + $(window).height())) {

    $(".drag").css("bottom", dw_height);

    } else {

    $(".drag").css("bottom", 0);

    }

    }

    展开全文
  • 判断网页某一个元素是否可视

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

    千次阅读 2018-11-11 08:18:58
    jQuery判断元素是否显示与隐藏
  • 有时还要进一步知道,元素是全部都显示可视,还是有部分可视部分隐藏内容。有时还要进一步知道,隐藏内容的那一部分是占多大的大小。so,来聊聊如何获取元素的大小和位置信息。 计...
  • 元素距离顶部高度(elOffsetTop) >= dom滚动高度(docScrollTop) 并且元素距离顶部高度(elOffsetTop) < (dom滚动高度 + 视窗高度) 上代码: 一个多图表 懒加载 例子 <template> <div :id=...
  • 个性签名: 生如夏花,逝如冬雪;人生如此,何悔何怨。 前言: 经常需要计算元素的大小...这里一次性做个总结,以用来判断元素是否可视区域以及用原生js简单实现懒加载。文末有个简单的懒加载实现的demo,有需要...
  • js判断获取元素是否可视区域

    千次阅读 2019-07-09 13:52:00
    js判断获取元素是否可视区域 执行var ab = $(".nav_dh")[0]; isElementInViewport(ab) function isElementInViewport(el) { //获取元素是否可视区域 var rect = el.getBoundingClientRect(); return ( ...
  • 当用户浏览网页的时候,判断某个元素是否浏览器可视区域内,比如视频播放,如果用户滚动看评论,应该停止播放 啥也不说了,直接上demo: visibilitychange 应用 #div1,#div2,#d
  • 当页面滚动时,元素随页面滚动,该元素距离顶部的距离 let cardOffsetTop = $("#card").offset().top; 获取 card 的高度(card 包含外边距) let cardOuterHeight = $("#card").outerHeight(true); //这个方法...
  • 判断两个List元素是否相同;

    万次阅读 2019-05-15 18:06:14
    → 集合中的元素必须重写equals方法自行判断元素是否相同 * 哈希地址相同 返回true * 如果两个参数都为空,则返回true * 如果有一项为空,则返回false * 如果数据长度不相同,则返回false * 集合1包含集合2中的...
  • 前端开发中,有时需要判断某个元素是否浏览器的可视区域内,或者是否已经滚动出了可视区域.首先想到的便是javascript操作,原生方法自然可以,不过Jquery已经封装了一些属性,使用起来更方便些,我们这里就讨论这种...
  • 假设此元素为 #item,先说几个关键的属性: 1.jQuery(‘#item’).offset().top #item 的绝对偏移量,指#item的实际尺寸(即不包括外边框margin)的上边界到页面顶端的距离.这个值不随窗口滚动而改变 2.jQuery(‘#item...
  • Freemarker判断是否包含某个元素

    万次阅读 2017-01-13 23:16:28
    1.Freemarker中,如果要判断序列中是否包含某个指定的元素,可以使用freemarker的内建函数seq_contains。 2.如果判断字符串,可以用contains。他会查找所有一样的字符,例如:{12,2,4,534,},5和3它同样会被匹配。...
  • 它可以存多种不同的元素,但元素时怎么判断元素是哪一类呢?元素时,可以通过调用getclass方法与类.class比较,来判断List中的元素是哪一类。然后再将该元素进行强制类型转换即可。 2.关于AutoCAD中数据...
  • 元素——答题

    万次阅读 多人点赞 2019-09-19 14:10:44
    元素——答题 微元素每日任务,答题
  • Freemarker中,如果要判断序列中是否包含某个指定的元素,可以使用freemarker的内建函数seq_contains。 注:seq_contains这个内建函数从FreeMarker 2.3.1 版本开始可用。而2.3 版本中不存在。 使用示例: ...
  • 判断div是否可视

    千次阅读 2015-09-20 21:31:25
    判断div是否可视内: (1)获取div相对于窗口的偏移量:document.Element.offsetTop; (2)获取窗口的高度:window.innerHeight; (3)获取文档滚动的高度:document.body.scrollTop; (4)如果(2...
  • ArrayList中判断是否存在某个元素是用contains(Object obj)方法,而 contains()方法是依赖于equals方法的。 众说周知,object里的equals()方法其实是判断两个对象的地址值是否相等,也就相当于这两个对象是否是同...
  • <template> <div class="app"> <headVue ></headVue> <div class="fu"> <div class="nav"> <ul> <li v-fo...
  • CSS 行内级元素和行内框

    千次阅读 2018-02-19 22:06:43
    行内级元素和行内框行内级元素(inline-level element),就是那些源文档中不会形成新块的元素,这些元素的左右可以放置其他元素。典型的行内级元素有 span、em、strong、a,等等。根据元素自身的特点,行内级元素...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 148,993
精华内容 59,597
关键字:

如何判断元素在哪个区