Javascript clientHeight在某些上下文中返回NaN

时间:2014-06-02 15:15:50

标签: javascript jquery nan

有趣的问题对我而言。

我正在使用javascript中的无限滚动内容,需要在某个时刻获取div的clientHeight:

这是代码:

document.addEventListener('DOMContentLoaded', init, false);
        function init(){
            var j = 0;
            var inner1 = document.getElementById("innerDiv1");
            inner1.addEventListener("scroll", function(event){ window.j = 2; checkForLoad();});
            var inner2 = document.getElementById("innerDiv2");
            inner2.addEventListener("scroll", function(event){ window.j = 1; checkForLoad();});
        }
        var i = 0;
        var checkForLoad = function() {
            var bottomDiv;
            var bottomDivChild;
            var offsetOfDiv;
            var offsetOfPage;
            if(window.j === 2){
                bottomDiv = document.getElementById("innerDiv1");
                bottomDivChild = bottomDiv.lastElementChild;
                offsetOfDiv = bottomDivChild.offsetTop + bottomDivChild.clientHeight; //WORKS FINE
                offsetOfPage = (document.getElementById("innerDiv1").pageYOffset) + (document.getElementById("innerDiv1").clientHeight); //THIS IS WHERE THE ISSUE IS
            }
            else if(window.j === 1){
                bottomDiv = document.querySelector("innerDiv2 > div:last-child");
                offsetOfDiv = bottomDiv.offsetTop + bottomDiv.clientHeight;
                offsetOfPage = inner1.pageYOffset + inner1.innerHeight;
            }
            if(offsetOfPage > offsetOfDiv - 10) {
            alert("time to add");
            //eventually will be AJAX with XSL
                if (i % 5 !== 0) {
                    i++;
                    alert("into the append part");
                    var newResults = document.createElement("div");
                    newDiv.innerHtml = "testing " + i;
                    if(window.j === 2){
                    document.getElementById("innerDiv1").appendChild(newResults);
                    }
                    else if(window.j === 1){
                    document.getElementById("innerDiv2").appendChild(newResults);
                    }
                    checkForLoad();
                } else if (i%5 === 0) {
                    newDiv = document.createElement("div");
                    newDiv.innerHTML = "Show more Results! " + i;
                    document.getElementById("scrollingDiv").appendChild(newDiv);
                    newDiv.setAttribute("ID", "showResults");
                    newDiv.setAttribute("onClick", "showMore()");
                }
            }

        };

我意识到这里存在一些不一致之处,但它们是我不使用的脚本的一部分。这是问题,在if(window.j === 2)语句中,您可以看到我在几个地方使用客户端高度。在第一个中,它完美地返回一个数字,生命按计划继续,但是当我在得到“offSerOfPage”的行中使用它时,总和变为NaN。我正在使用firebug来调试它,当我将document.getElementById(“innerDiv1”)。clientHeight添加到监视列表时,它显示它有一个数字附加到它。然而,总和以NaN的形式返回。我认为我的措辞有点令人困惑,所以如果你需要澄清,请问!谢谢!

0 个答案:

没有答案