zoukankan      html  css  js  c++  java
  • 获取元素与浏览器视图的距离

    实现“元素出现在视图中时加载动画”这一个效果(当然,用处很多,这里只是我想实现的效果)

    不浪费大家时间,先上我解决问题的参考文档,不想看的朋友可以直接:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

    为了实现这个效果,相较于我这个前端小白,当然需要借助各位大佬的力量,但是我发现百度上面推荐的大佬文章也许是我太过菜鸡了,试了一个又一个完全没有效果嘛

    有让用 jquery 的,我进去看了不到半分钟,心里只有两个字“完了”,这不是我这种小白可以看得懂的,只能默默的留下了没技术的眼泪。

    在我基本上要放弃的时候,我想起来这种情景不就是图片懒加载时需要用的到的嘛,想到这里我立马换了个方向,不再纠结于视图,页面,元素的高度,距离(关键是太难了~ o(╥﹏╥)o)

    换了方向以后直接局势就明朗了,上代码:

    // 获取浏览器视图高度(貌似是还兼容什么“牛批”的浏览器)
    var viewHeightValue = document.documentElement.clientHeight || document.body.clientHeight;

    当然了,在之前晕头转向查询各种信息的时候,我了解到此属性是只读,也就是不能去动态改变的,

    当然身为BUG仔的我当然不(qian)相(shou)信(shi),然后就直接在代码里面写了个死值,理所当然的没有任何卵用,浏览器的高度其实我一个BUG仔能改的动的?

    接下来到重点:

    // 返回元素相对于视图的距离
    el.getBoundingClientRect()

    相对于浏览器视图的距离哦,但是还有一丝丝的重点(下面是我从MDN拿(tou)过来的图):

    当时我自己看这个图的时候有点懵逼,所以就自己给他加了颜色,希望能减轻一点 “·”

    所以:我若想实现想要的效果思路就应该为:获取浏览器视图的高(viewHeight)  ->  获取元素距离视图的高度(elHeight)  ->  判断 (viewHeight - elHeight)是否小于 viewHeight ,若是就开始执行动画;

    完美!~

    点赞!收工!~

  • 相关阅读:
    C# 串口调试助手源码
    C# 中 textBox 侧面滑条 属性
    C# 中 comboBox 禁止输入
    VS2015 下载 破解
    中国移动OnetNet云平台 GET指令使用
    JSON JsonArray和JsonObject学习资料
    sublime 添加 ConvertToUTF-8
    sublime 添加 颜色插件 colorcoder
    线程池
    爬虫中基本的多线程
  • 原文地址:https://www.cnblogs.com/chenghuayike/p/11970731.html
Copyright © 2011-2022 走看看