扫码关注官方订阅号
在窗口滚动过程中,如何判断一个元素出现在可视窗口中?
认证高级PHP讲师
$.fn.isOnScreen = function(){ var win = $(window); var viewport = { top : win.scrollTop(), left : win.scrollLeft() }; viewport.right = viewport.left + win.width(); viewport.bottom = viewport.top + win.height(); var bounds = this.offset(); bounds.right = bounds.left + this.outerWidth(); bounds.bottom = bounds.top + this.outerHeight(); return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); };
元素的 offsetHeight 值 和 滚动过程中的 scrollTop 值去做比较,可以得出吧
offsetHeight
scrollTop
有个插件很好用 waypoint
每个元素有offsetTop属性,表示该元素到页面顶部的距离;页面有scrollTop属性,表示滚动条竖直方向滚动的距离;当 页面高度+scrollTop > offsetTop 时,即是元素出现在页面时。
使用getBoundingClientRect()方法能够获取到指定的元素在当前viewpoint中的位置这个viewpoint就是浏览器的可是窗口
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
元素的
offsetHeight值 和 滚动过程中的scrollTop值去做比较,可以得出吧有个插件很好用 waypoint
每个元素有offsetTop属性,表示该元素到页面顶部的距离;页面有scrollTop属性,表示滚动条竖直方向滚动的距离;当 页面高度+scrollTop > offsetTop 时,即是元素出现在页面时。
使用getBoundingClientRect()方法能够获取到指定的元素在当前viewpoint中的位置
这个viewpoint就是浏览器的可是窗口