jQuery scrollTo Проблема с прокруткой двух DIV - PullRequest
Новая
       7

jQuery scrollTo Проблема с прокруткой двух DIV

0 голосов
/ 03 марта 2010

У меня проблемы с плагином jQuery scrollTo. У меня есть 2 DIV (nav2 и content), и я заполняю их с помощью вызовов ajax: 

var myJs = { ...
getWithAjax : function( targetFile, targetDivId, anchorId ) {
    // get is jquery function and wraps ajax call
    $.get(targetFile, function(data) {
        $('#'+targetDivId).html( data );
         if(anchorId !== null){
            myJs.doScrollTo(targetDivId, anchorId);
         }
    });

},

go : function(file1, file2) {
    var file1Array, file2Array = new Array();
    if(file1 !== null){
        file1Array = this.splitLinkFromAnchor(file1);
        // update nav2 div
        this.getWithAjax(file1Array[0], "nav2", file1Array[1]);
    },  //... same with file2 but other div "content" 

doScrollTo : function( divId, anchorId ) {
    $( '#' + divId ).scrollTo( '#' + anchorId, 0 );
}
// ... further functions
} // end of object literal

Как видите, после получения контента я добавляю его, а затем пытаюсь прокрутить до определенной позиции в этом целевом div с помощью anchorId. Это делается с помощью функции doScrollTo, которая включает в себя функцию jQuery-Plugin scrollTo. go - это оболочка для вызовов ajax. Перед выполнением get-Requests он извлекает имя файла и идентификатор (разделенные на «#») из заданных входных параметров. Вот как все это называется:

myJs.go( 'file_a.html#anchor1', 'file_b.html#anchor2' );"

РЕДАКТИРОВАТЬ: С одним DIV, nav2 DIV, все работает отлично. Но другой DIV content иногда прокручивается, иногда нет. А также, если он прокручивается и я перемещаю полосу прокрутки DIV вверх, а затем снова вызываю go, он больше не прокручивается. И, как я уже сказал, все это прекрасно работает с nav2 DIV ...

Кто-нибудь понял, что я делаю не так?

Спасибо.

1 Ответ

0 голосов
/ 03 марта 2010 
$.get(targetFile, function(data) {
    $('#'+targetDivId).html( data );
});
if(anchorId !== null){
        this.doScrollTo(targetDivId, anchorId);
}

Вы звоните doScrollTo до того, как XMLHttpRequest завершится.

В этом весь смысл функции обратного вызова, которую вы передаете в $.get, она выполняется не сразу, а только после завершения асинхронного HTTP-запроса. Сам метод get немедленно возвращается, поэтому обратный вызов не запустился и не заполнил содержимое к тому времени, когда вы переходите к следующей строке с if.

Если вы хотите, чтобы прокрутка происходила сразу после загрузки контента, вам нужно поместить этот вызов в функцию обратного вызова, которую вы передаете get. Но обратите внимание, что this не сохраняется в функциях обратного вызова, поэтому вам придется его bind или использовать замыкание: 

var that= this;
$.get(targetFile, function(data) {
    $('#'+targetDivId).html( data );
    if(anchorId !== null){
        that.doScrollTo(targetDivId, anchorId);
    }
});
...