olevik
  • 0
Новичок

Document.Body.ScrollTop в WordPress

  • 0

У меня есть скрипт, который загружает jQuery, когда элемент попадает в окно просмотра, обнаруженное Javascript (без библиотеки), и это выглядит так:

окно просмотра.js:

var height = 0;
if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    height = window.innerHeight;
} else if ( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    height = document.documentElement.clientHeight;
} else if ( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    height = document.body.clientHeight;
}

function gingah_comments_onLoad() {
    var element = document.getElementById("comments");
    var current = height+document.body.scrollTop;
    var target = element.offsetTop;
    console.log(current);
    console.log(target);
    if (current >= target) {
        if (typeof jQuery == 'undefined') {
            $.defer("http://localhost/wp/wp-includes/js/jquery/jquery.js", {
            }).done(console.log('loaded jQuery'));
            window.onscroll = null;
        }
    }
}
window.onscroll = gingah_comments_onLoad;

И используемый html:

<head>
<script src="DeferJS.min.js" type="text/javascript"></script>
<script src="viewport.js" type="text/javascript"></script>
</head>
<body>
<div style="height: 1000px; border: 1px solid #ff0000;">Top</div>
<div class="comment_box" style="height: 1000px; border: 1px solid #ff0000;">
    <div id="comments">Comment1</div>
</div>
</body>

DeferJS.min.js относится к уменьшенной версии следующего: https://github.com/BorisMoore/DeferJS/raw/master/DeferJS.js.

Однако, когда я пытаюсь реализовать это в WordPress (3.1), используя wp_enqueue_script как для viewport.js, так и для DeferJS.min.js, scrollTop вообще не работает. Когда приведенные выше HTML и JS объединены, он будет записывать значения в консоль, делая очень понятным, когда #comments появлялись в области просмотра.

Но при воспроизведении процесса в WordPress текущая переменная не увеличивается при прокрутке вниз, а остается статической. И, согласно Firebug, viewport.js, DeferJS.min.js и l10n.js (локализация WordPress 3.1) — единственные загружаемые скрипты. Кроме того, в Quirksmode метод scrollTop указан как доступный практически во всех браузерах.

Что может быть причиной этой неисправности в document.body.scrollTop?

Share
  1. Казалось бы, что-то в WordPress вызывает виртуальный возврат к стандартам, требующим кросс-браузерной совместимости, из-за чего один и тот же код не работает внутри и вне WordPress. Однако с некоторым кодом для обработки различий между браузерами (и по-прежнему избегая использования библиотек) теперь viewport.js выглядит следующим образом:

    function height() {
        if( typeof( window.innerWidth ) == 'number' ) {
            //Non-IE
            return window.innerHeight;
        } else if ( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
            //IE 6+ in 'standards compliant mode'
            return document.documentElement.clientHeight;
        } else if ( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
            //IE 4 compatible
            return document.body.clientHeight;
        }
    }
    function distance() {
        if(typeof pageYOffset!= 'undefined'){
            //most browsers
            return pageYOffset;
        } else {
            var B= document.body; //IE 'quirks'
            var D= document.documentElement; //IE with doctype
            D= (D.clientHeight)? D: B;
            return D.scrollTop;
        }
    }
    
    function gingah_comments_onLoad() {
        var element = document.getElementById("comments");
        var current = height()+distance();
        var target = element.offsetTop;
        console.log(current);
        console.log(target);
        if (current >= target) {
            if (typeof jQuery == 'undefined') {
                $.defer("http://localhost/wp/wp-includes/js/jquery/jquery.js", {
                }).done(console.log('loaded jQuery'));
                window.onscroll = null;
            }
        }
    }
    window.onscroll = gingah_comments_onLoad;
    

    Который затем загружает jQuery из стандартного пути WordPress, когда появляется элемент #comments.

    • 0

Оставить ответ

You must login to add an answer.