问题描述
下面的代码用于查找可以通过javascript滚动的元素(正文或html)。
The code below is used to find the element that can be scrolled (body or html) via javascript.
var scrollElement = (function (tags) {
var el, $el, init;
// iterate through the tags...
while (el = tags.pop()) {
$el = $(el);
// if the scrollTop value is already > 0 then this element will work
if ( $el.scrollTop() > 0){
return $el;
}
// if scrollTop is 0 try to scroll.
else if($el.scrollTop( 1 ).scrollTop() > 0) {
// if that worked reset the scroll top and return the element
return $el.scrollTop(0);
}
}
return $();
} (["html", "body"]));
// do stuff with scrollElement...like:
// scrollElement.animate({"scrollTop":target.offset().top},1000);
当文件的高度大于
窗口的高度
。但是,当文档的高度
与窗口
相同或更小时,上面的方法将不工作,因为 scrollTop()
将始终等于0.如果更新DOM并且文档的高度,这将成为问题
在代码运行后超出窗口
的高度。
This code works perfectly when the height of the
document
is greater than the height of the window
. However, when the height of the document
is the same or less than the window
the method above will not work because scrollTop()
will always be equal to 0. This becomes a problem if the DOM is updated and the height of the document
grows beyond the height of the window
after the code runs.
此外,我一般不要等到document.ready设置我的javascript处理程序(这通常有效)。我可以暂时将一个高div添加到
正文
以强制上述方法工作但是要求文档在IE中准备就绪(你在标记关闭之前无法向body元素添加节点)。有关 document.ready
反模式主题的更多信息。
Also, I generally don't wait until document.ready to set up my javascript handlers (this generally works). I could append a tall div to the
body
temporarily to force the method above to work BUT that would require the document to be ready in IE (you can't add a node to the body element before the tag is closed). For more on the document.ready
"anti-pattern" topic read this.
所以,我很想找到一个找到的解决方案即使
文档
很短,也可以滚动元素。有什么想法吗?
So, I'd love to find a solution that finds the scrollable element even when the
document
is short. Any ideas?
推荐答案
自从我提出这个问题已经过了大约5年......但是迟到总比没有好!
Its been about 5 years since I asked this....but better late than never!
document.scrollingElement
现在是CSSOM规范的一部分,但几乎没有实际的浏览器实现此时(2015年4月)。但是,你仍然可以找到元素......
document.scrollingElement
is now part of the CSSOM spec, but has little to no real-world browser implementation at this point (April 2015). However, you can still find the element...
使用由和。
由Diego Perini实现这个基本解决方案(上面的polyfill更好,CSSOM兼容,所以你应该使用它。):
Which implements this basic solution by Diego Perini (The above polyfill is better and CSSOM compliant, so you should probably use that.):
/*
* How to detect which element is the scrolling element in charge of scrolling the viewport:
*
* - in Quirks mode the scrolling element is the "body"
* - in Standard mode the scrolling element is the "documentElement"
*
* webkit based browsers always use the "body" element, disrespectful of the specifications:
*
* http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop
*
* This feature detection helper allow cross-browser scroll operations on the viewport,
* it will guess which element to use in each browser both in Quirk and Standard modes.
* See how this can be used in a "smooth scroll to anchors references" example here:
*
* https://dl.dropboxusercontent.com/u/598365/scrollTo/scrollTo.html
*
* It is just a fix for possible differences between browsers versions (currently any Webkit).
* In case the Webkit bug get fixed someday, it will just work if they follow the specs. Win !
*
* Author: Diego Perini
* Updated: 2014/09/18
* License: MIT
*
*/
function getScrollingElement() {
var d = document;
return d.documentElement.scrollHeight > d.body.scrollHeight &&
d.compatMode.indexOf('CSS1') == 0 ?
d.documentElement :
d.body;
}
-
这篇关于如何确定是否“html”或“身体”或“身体”。滚动窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!