We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
There was an error while loading. Please reload this page.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
最近有一个下拉列表无限加载的需求,目前这种需求越来越多,所以这里记录一下实现原理,已经封装成一个工具方法,工参考!
/** * @param warp {DOM || null} 外层容器,当为null时,默认以整个文档结构为外容器 * @param threshold {Number} 滚动阀值,即可以设置一个值,当滚动到离地步还有一段距离时,就开始执行callback * @param cb {Function} 回掉函数 */ let scrollToLoad = (warp, threshold, cb) => { let scrollTop = 0, warpHeight, listHeight, _threshold_ = threshold || 0; if (!warp) { // 获取滚动条当前的位置 if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; } else if (document.body) { scrollTop = document.body.scrollTop; } // 获取当前可视范围的高度 if (document.body.clientHeight && document.documentElement.clientHeight) { warpHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); } else { warpHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); } // 获取list完整的高度 listHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); } else { scrollTop = warp.scrollTop; warpHeight = warp.clientHeight; listHeight = warp.scrollHeight; } if (listHeight <= warpHeight + scrollTop - _threshold_) { cb && cb(); } }
上面看到document.documentElement与document.body是不是晕乎乎的呢,下面简单说明一下两者的关系与区别吧!
document.documentElement
document.body
document
IE6
(window.compatMode == 'CSS1Compat')
document.documentElement.clinetWidth
document.documentElement.clientHeight
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Uh oh!
There was an error while loading. Please reload this page.
最近有一个下拉列表无限加载的需求,目前这种需求越来越多,所以这里记录一下实现原理,已经封装成一个工具方法,工参考!
原理
document.documentElement与document.body
上面看到
document.documentElement
与document.body
是不是晕乎乎的呢,下面简单说明一下两者的关系与区别吧!document
:代表的是整个文档document.documentElement
:整个文档节点树的根节点,在网页中即html标签document.body
:整个文档DOM节点树里的body节点,网页中即为body标签元素IE6
的标准模式中(window.compatMode == 'CSS1Compat')
时,document.documentElement.clinetWidth
和document.documentElement.clientHeight
保存着页面视口信息,而对于混杂模式下的IE6
则必须通过document.body
对象获取关于视口大小
The text was updated successfully, but these errors were encountered: