zoukankan      html  css  js  c++  java
  • 判断元素是否在可视区内

    做图片滚动加载的时候会判断图片是否在可视区域内,如果在就加载原地址图片,下面借用jquery实现这个功能

    首先看下面函数

    $('#dom').offset().top
    //量,寸(框margin)离.
    $('#dom').outerHeight()
    //寸,即 height+padding+border
    $('#dom').outerHeight(true)
    //#dom距,即 height+padding+border+margin
    $(window).scrollTop()
    //量,量,
    $(window).height()
    //
     
     

    第一种情况页面向上滚动(元素跑到最上面并且也看不到啦)

    复制代码

    $(window).scrollTop()>($('#dom').offset().top+$('#dom').outerHeight())
    //如果上面代码为true说明元素不可见

    另一种情况就是页面向下滚动(元素跑到最下面并且也看不到啦)

    复制代码

    $(window).scrollTop()+$(window).height()<$('#dom').offset().top()
    //元素的顶部偏移量大于浏览器滚动上去的加上窗口的高度的和(返回值为true)就说明元素在浏览器下面不可见

     

    下面把判断元素是否可见的方法写成一个函数可以直接调用

    var isVisible = function(selectid) {
    var o;
    if ('object' === typeof selectid) {
    o = selectid;
    } else {
    o = $(selectid);
    }
    var of = o.offset();
    var w = $(window);
    return !(w.scrollTop() > (of.top + o.outerHeight()) || (w.scrollTop() + w.height()) < of.top);
    }
     
     

    传入jquery的选择器id就可以

  • 相关阅读:
    算术运算
    数据分析
    科学计算
    面向对象
    文件操作-py
    pillow图像处理
    模块
    固定翼飞行过程产生的阻力
    修改行间距等基本操作
    文件操作
  • 原文地址:https://www.cnblogs.com/zhangycun/p/7345749.html
Copyright © 2011-2022 走看看