Как повторно инициализировать jscrollpane на весь браузер для содержимого ajax

Question

Итак, я использую jScrollPane для замены полосы прокрутки по умолчанию для браузеров (основной). Я использую эту функцию, чтобы сделать это взято по ссылке, указанной выше.

// Set jscroll for window
$(function()
{
    var win = $(window);
    // Full body scroll
    var isResizing = false;
    win.bind(
        'resize',
        function()
        {
            if (!isResizing) {
                isResizing = true;
                var container = $('#grid');
                // Temporarily make the container tiny so it doesn't influence the
                // calculation of the size of the document
                container.css(
                    {
                        'width': 1,
                        'height': 1
                    }
                );
                // Now make it the size of the window...
                container.css(
                    {
                        'width': win.width(),
                        'height': win.height()
                    }
                );
                isResizing = false;
                container.jScrollPane(
                    {
                        'showArrows': false,
                        'verticalGutter': 10
                    }
                );
            }
        }
    ).trigger('resize');

    // Workaround for known Opera issue which breaks demo (see
    // http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
    $('body').css('overflow', 'hidden');

    // IE calculates the width incorrectly first time round (it
    // doesn't count the space used by the native scrollbar) so
    // we re-trigger if necessary.
    if ($('#grid').width() != win.width()) {
        win.trigger('resize');
    }
});

Теперь моя проблема заключается в том, что я использую загрузку страниц кладки и ajax вместе с плагином загруженных изображений, чтобы дождаться загрузки изображений, чтобы применить кладку. Я использую этот метод для запуска кладки с загруженными изображениями.

$(document).ready(function() {
  var $container = $('#boxes');
  // var settings = {
    // 'showArrows': false,
    // 'verticalGutter': 10
  // };
  // var pane = $('#grid')
  // pane.jScrollPane(settings);
  // var api = pane.data('jsp');
  $container.imagesLoaded(function(){
    $('#boxes').fadeIn('fast');
    $('#boxes').masonry({
      itemSelector: '.box',
      columnWidth: 234,
      gutterWidth: 12,
      isFitWidth: true,
      isResizable: true
    });
    // api.reinitialise();
  });
});

Теперь при использовании этого метода полосы прокрутки не будут отображаться, пока размер браузера не изменится. Я попытался использовать api.reinitialise(), но он не правильно определяет размер содержимого и будет перекрывать полосу прокрутки над содержимым, пока размер окна не изменится.

Теперь мне также нужно повторно инициализировать jscrollpane, когда новая страница загружается с помощью ajax. Я использую этот метод на своем WordPress сайте для загрузки нового контента.

//Ajax page loading!!
$(document).ready(function($) {
    var $mainContent = $("#grid"),
        siteUrl = "http://" + top.location.host.toString(),
        url = '',
        type = '',
        contentType = ''; 
    $(document).on("click", "a[href^='"+siteUrl+"']:not([href*='/wp-admin/']):not([href*='/wp-login.php']):not([href$='/feed/'])", function() {
        type = $(this).data("type");
        location.hash = this.pathname;
        return false;
    });
    $("#searchform").submit(function(e) {
        location.hash = '?s=' + $("#s").val();
        e.preventDefault();
    }); 
    $(window).bind('hashchange', function(){
        url = window.location.hash.substring(1); 
        if (!url) {
            return;
        } 
        contentType = $("#sector").data("type");
        url = url + " #sector"; 
        $mainContent.animate({opacity: "0.1"}).html('<p>Please wait...</>').load(url, function() {
            $mainContent.animate({opacity: "1"});
            if (type === "masonry" || contentType === "masonry") {
              var $container = $('#boxes');
              $container.imagesLoaded(function(){
                $('#boxes').fadeIn('fast');
                $('#boxes').masonry({
                  itemSelector: '.box',
                  columnWidth: 234,
                  gutterWidth: 12,
                  isFitWidth: true,
                  isResizable: true
                });         
              });
            }           
        });
    });
    $(window).trigger('hashchange');
});

Поэтому, учитывая, что на некоторых из моих страниц есть кладка, а на некоторых нет, мне нужен метод, чтобы установить jscroll при загрузке страницы и повторно инициализировать его для страниц, загруженных кладкой и ajax. Какой здесь метод?

Answer 1

Вы должны использовать это:

var data = 'blah blah';
var pane = $('#scroll-pane')
var api = pane.data('jsp');
api.getContentPane().append(data);
api.reinitialise();