精华内容
下载资源
问答
  • 判断div在可视区域
    千次阅读
    2018-08-06 22:48:04

    当网页页面上需要添加锚点回到顶部时,要判断当前页面的浏览情况,比如规定一个点,当它出现在可视范围内时,显式回到顶部的图标,否则,回到顶部的图标隐藏。

    代码如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    	<script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            window.onload = function(event)
            {
                window.onscroll = function(){
                    //获取div距离顶部的偏移量
                    var top = document.getElementById("secend").offsetTop;
                    //获取屏幕高度
                    var windowTop = window.innerHeight;
                    //屏幕卷去的高度
                    var scrollTops = document.body.scrollTop;
                    if((windowTop+scrollTops)>top)
                    {
                        alert("已经进入可视区");
    					
                    }else
                    {
                       alert("并没有进入可视区");
    					
                    }
                }
            }
        </script>
    </head>
    <body>
    <div id="div_text" style="height: 200px;width: 200px;background: red;float:right;">w</div>
       <div id="first" style="height: 900px;width: 200px;background: green">q</div>
       <div id="secend" style="height: 200px;width: 200px;background: red">w</div>
    </div>  
     
    </body>
    </html>

     

    更多相关内容
  • 主要介绍了使用jQuery判断Div是否在可视区域的方法 判断div是否可见
  • js判断div元素是否页面可视区域

    千次阅读 2021-03-16 19:21:15
    banner图在可视窗口内展示程度达到80%以上即触发一个事件(由于banner图是满屏宽,因此不需要考虑高度) 2.分析: 判断banner图何时不可见范围内 当banner图的底部线条可见区域下方超过20%即为不可见范围 当...

    1.需求:

    banner图在可视窗口内展示程度达到80%以上即触发一个事件(由于banner图是满屏宽,因此不需要考虑高度)

    2.分析:

    • 判断banner图何时不在可见范围内
      • 当banner图的底部线条在可见区域下方超过20%即为不在可见范围
      • 当banner图的顶部线条在可见区域上方超过20%即为不在可见范围

    3.代码实现:

    <!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;
          }
          div {
            width: 100%;
            height: 200px;
            background: #1c65b9;
            margin-bottom: 10px;
            text-align: center;
            line-height: 200px;
            font-size: 40px;
          }
          .banner {
            color: #ffe600;
            background: #dd1ca3;
          }
        </style>
      </head>
      <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div class="banner">6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <script type="text/javascript">
          var banner = document.querySelector(".banner");
          document.addEventListener("scroll", function () {
            var scope = (banner.offsetHeight * (100 - 80)) / 100; //广告栏可出线范围大小
            var cH = document.documentElement.clientHeight; //当前页面可见区域高度
            var tY = banner.getBoundingClientRect().top; //广告栏顶部到可见区域顶端的高度
            var bY = banner.getBoundingClientRect().bottom; //广告栏底部到可见区域顶端的高度
            // 需要考虑两种可能   当tY小于-scope则代表不在窗口展示   当bY大于cH+scope则代表不在窗口展示
            if (tY < -scope || bY > cH + scope) {
              console.log("不在可见范围内");
            } else {
              console.log("在可见范围内:", "触发事件");
            }
          });
        </script>
      </body>
    </html>
    
    展开全文
  • 直接上代码: $(window).scroll(function () { var oT = document.getElementById("myDiv").offsetTop; if (oT >= $(window).... 如何判断一个Div是否在可视区域判断div是否可见 jq、js判断元素是否在可视区域

    直接上代码:

    $(window).scroll(function () {

    var oT = document.getElementById("myDiv").offsetTop;

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

    console.log("div出现在可视范围");

    }

    });

    其中 .offsetTop 是原生写法,也可以用jQuery的写法 $(element).offset().Top()

    此代码适用于 Html5网站往下滑动时 逐渐显示的 CSS3 animate 动画效果

    如何判断元素是否在可视区域ViewPort

    个性签名: 生如夏花,逝如冬雪:人生如此,何悔何怨. 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个 ...

    使用jQuery判断元素是否在可视区域

    $("#app").offset().top; offset().top表示 绝对偏移值,比如说有一个很长的页面,#app这个元素 在最底下,  $("#app&quot ...

    如何判断一个Div是否在可视区域,判断div是否可见

    TF-8">

    jquery如何判断div是否隐藏--useful

    one") { div.style.display = &q ...

    Ztree插件,定位节点时(focus)不能进入可视区域BUG解决方案

    相关插件版本: jquery.ztree.exedit-3.4.js jquery.ztree.all-3.4.js jquery-1.8.0.js function onAsyncSuccess(e ...

    随机推荐

    树形DP习题

    听闻noip要考树形DP,本蒟蒻万分惶恐,特刷一坨题目,以慰受惊之心. codevs 1486 /*和非常出名的"选课"是一个题*/ #include ...

    &lbrack;原&rsqb;常用sqlserver数据库使用sql语句

    1.表结构文档生成查询语句: SELECT 架构名 Then s.[name] Else '' End, 表名 Then D.name Else '' End, 表说明 Then isnull(F.v ...

    UNIQUEIDENTIFIER列上的统计信息

    UNIQUEIDENTIFIER列上的统计信息非常有意思,在它上面有一些很令人讨厌的行为.我们来看下. 问题重现(The repro) 为了向你展示我们刚抱怨的行为,我用下列简单的表定义创建了一个数据 ...

    java解析属性文件

    -----------------------解析属性文件----------------------------- /**   * 获取src下属性文件   * @param params   * ...

    mysql&lowbar;DML&lowbar;insert

    1.指定字段插入数据 insert into wsb2(stu_name,salary)values ('nan','10000'); insert into wsb2(stu_name,salary ...

    JS——判断一个对象是否为空

    判断一个对象是否为空对象,本文给出三种判断方法: 1.最常见的思路,for...in...遍历属性,为真则为"非空数组":否则为"空数组" 2.通过JSON自带 ...

    vue&lowbar;表单 input 的绑定

    展开全文
  • div在可视范围 " ); } }); }); script > head > < body > < div style ="width:1px;height:2000px;" > div > < div id ="eq" style =" width:100px; height:100px; background-color:Red;" > 1 ...
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>js</title>
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(window).scroll(function () {
                    var a = document.getElementById("eq").offsetTop;
                    if (a >= $(window).scrollTop() && a < ($(window).scrollTop()+$(window).height())) {
                        alert("div在可视范围");
                    }
                });
            });
        </script>
    </head>
    <body>
        <div style="width:1px;height:2000px;"></div>
        <div id="eq" style=" width:100px; height:100px; background-color:Red;">1</div>
        <div style="width:1px;height:2000px;"></div>
    </body>
    </html>

     

    转载于:https://www.cnblogs.com/codinganytime/p/5193480.html

    展开全文
  • vue 判断组件进入可视区域

    千次阅读 2020-09-14 18:47:21
    1、mounted 监听 监听元素是否进入/移出可视区域 window.addEventListener("scroll", this.scrollHandle, true); // 监听 监听元素是否进入/移出可视区域 2、 methods 执行事件 scrollHandle() { const offset = ...
  • function ISshow(dom, callback) { // start 。。。。 var status = Array.isArray(dom); // 减少判断 var scro = (function() { if(document.document...
  • 上公式: 元素距离顶部高度(elOffsetTop) >= dom滚动高度(docScrollTop) 并且元素距离顶部高度(elOffsetTop) < (dom滚动高度 + 视窗高度) ...div :id="boxId" style="height: 450px"> <di...
  • 一、用途 可视区域即我们浏览网页的设备肉眼可见的区域,如下图 日常开发中,我们...判断一个元素是否在可视区域,我们常用的有三种办法: offsetTop、scrollTop getBoundingClientRect Inters..
  • 判断div是否在可视区内

    千次阅读 2015-09-20 21:31:25
    判断div是否在可视区内: (1)获取div相对于窗口的偏移量:document.Element.offsetTop; (2)获取窗口的高度:window.innerHeight; (3)获取文档滚动的高度:document.body.scrollTop; (4)如果(2...
  • IntersectionObserver介绍 intersection-observer npm包实际运用 目的:列表中,用户上滑列表,列表中的元素可见时,记录此元素已曝光 安装 yarn add intersection-observer 引用 main.js import 'intersection-...
  • 个性签名: 生如夏花,逝如冬雪;人生如此,何悔何怨。 前言: 经常需要计算元素的大小...这里一次性做个总结,以用来判断元素是否在可视区域以及用原生js简单实现懒加载。文末有个简单的懒加载实现的demo,有需要的...
  • 如果元素的top视窗高度范围内 就证明可见区域。if( el.top0 ){ 就可以了判断了 }再严谨一些 加上元素自身的高度。if( el.top 0 ){范围内}变量通过以下两个方式获取://屏幕的高度varSystemInfo=wx....
  • 面试之如何判断一个元素是否在可视区域中?面试官:如何判断一个元素是否在可视区域中?一、用途二、实现方式offsetTop、scrollTop注意getBoundingClientRectIntersection Observer创建观察者传入被观察者三、案例...
  • 本系列主要整理前端面试中需要掌握的知识点。本节介绍如何判断一个元素是否可是区域
  • js如何判断一个元素在可视区域

    千次阅读 2021-11-08 21:06:04
    总结 一个元素content满足以下条件时,可判断在可视区域: const isShow=()=>{ return (content.offsetTop + content.offsetHeight > scrollTop) && (content.offsetTop ); }; 二、用getBoundingClientRect 0....
  • 前言:最近工作中,有这样一个场景,判断一个元素是否滚动的可视区域内,不就固定到可视区域的上方。为了以后再次遇到,所以记录下来,并分享。转载请注明出处:...
  • document.documentElement.scrollTop 6、判断元素是否可见区域内 // windowScrollTop = elementOffsetTop - windowHeight (目标元素刚进入可视区域) // windowScrollTop = elementOffsetTop + elementHeight(目标...
  • 一、用途可视区域即我们浏览网页的设备肉眼可见的区域,如下图日常开发中,我们经常需要判断目标元素是否视窗之内或者和视窗的距离小于一个值(例如 100 px),从而实现一些常用的功能,例如...
  • 且 *小于当前盒子到达顶部距离 与 当前盒子高度的和 *那么当前盒子就处于可视范围内 * */ if ( scrollTop >= tops && screenTop (tops + line_height)) { $('.el_topNav>div').eq(i).addClass('el_active').siblings...
  • "div在可视范围" );   }   });   });     <div style= "width:1px;height:2000px;" ></div>   <div id= "eq"   style= " width:100px; height:100px; background...
  • "div在可视范围" );   }   });   });     <div style= "width:1px;height:2000px;" ></div>   <div id= "eq"   style= " width:100px; height:100...
  • js判断获取元素是否在可视区域

    万次阅读 2019-07-09 13:52:00
    js判断获取元素是否在可视区域 执行var ab = $(".nav_dh")[0]; isElementInViewport(ab) function isElementInViewport(el) { //获取元素是否在可视区域 var rect = el.getBoundingClientRect(); return ( ...
  • 应用场景:只要页面加载了,其中页面中出现的li就向控制台输出第几个发送请求;本次加载的页面中,再将滚动条滚回前边的li,不再向控制台输出东西,也就是说已经显示过的li,不再向控制台输出东西。...
  • 判断网页某一个元素是否在可视

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,335
精华内容 3,334
关键字:

判断div在可视区域