资讯专栏INFORMATION COLUMN

scrollTop 瀑布流的关键点 offsetTop

cheng10 / 2386人阅读

摘要:瀑布流的关键点瀑布流的关键点在判断是否到达页面底部。最主要的一个参数就是看个图,你就明白了只要满足这个条件,就载入新内容最后一个元素的上边距窗口的高度文档上卷的高度如果满足条件,返回关于的测试,只有在才会变化,其它不无法获取,一直是参考

scrollTop 瀑布流的关键点

瀑布流的关键点在判断是否到达页面底部。

scrollTop

最主要的一个参数就是 scrollTop

看个图,你就明白了:只要满足这个条件,就载入新内容

function needLoadContent() {
    // 最后一个元素的上边距
    let lastOffsetTop = document.querySelector(".list-item:last-child").offsetTop;
    
    // 窗口的高度
    let clientHeight = window.innerHeight;
    
    // 文档上卷的高度
    let scrollTop = document.documentElement.scrollTop;
    
    // 如果满足条件,返回 true 
    return (lastOffsetTop < clientHeight + scrollTop);
}

关于 scrollTop 的测试, scrollTop 只有在 document.documentElement 才会变化,其它不无法获取,一直是 0

参考

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102618.html

相关文章

  • scrollTop 瀑布流的键点 offsetTop

    摘要:瀑布流的关键点瀑布流的关键点在判断是否到达页面底部。最主要的一个参数就是看个图,你就明白了只要满足这个条件,就载入新内容最后一个元素的上边距窗口的高度文档上卷的高度如果满足条件,返回关于的测试,只有在才会变化,其它不无法获取,一直是参考 scrollTop 瀑布流的关键点 瀑布流的关键点在判断是否到达页面底部。 scrollTop 最主要的一个参数就是 scrollTop 看个图,你就...

    ruicbAndroid 评论0 收藏0
  • 原生 JS 实现一个瀑布流插件

    摘要:瀑布流布局中的图片有一个核心特点等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如花瓣网等等。那么接下来就基于这个特点开始瀑布流探索之旅。 showImg(https://segmentfault.com/img/remote/1460000013059759?w=640&h=280); 瀑布流布局中的图片有一个核心特点 —— 等宽不定等高,瀑布流布局在国内网网站都有一定规模...

    Alfred 评论0 收藏0
  • 原生 JS 实现一个瀑布流插件

    摘要:瀑布流布局中的图片有一个核心特点等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如花瓣网等等。那么接下来就基于这个特点开始瀑布流探索之旅。 showImg(https://segmentfault.com/img/remote/1460000013059759?w=640&h=280); 瀑布流布局中的图片有一个核心特点 —— 等宽不定等高,瀑布流布局在国内网网站都有一定规模...

    lavnFan 评论0 收藏0
  • 原生 JS 实现一个瀑布流插件

    摘要:瀑布流布局中的图片有一个核心特点等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如花瓣网等等。那么接下来就基于这个特点开始瀑布流探索之旅。 showImg(https://segmentfault.com/img/remote/1460000013059759?w=640&h=280); 瀑布流布局中的图片有一个核心特点 —— 等宽不定等高,瀑布流布局在国内网网站都有一定规模...

    wenyiweb 评论0 收藏0
  • jQuery实现瀑布流效果

    摘要:何为瀑布流瀑布流,又称瀑布流式布局。最早采用此布局的网站是,逐渐在国内流行开来。四是服装款式设计资讯平台如看潮网等等。 何为瀑布流:   瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格。 ...

    mumumu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<