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');
    }
});

现在我的问题是我使用imagesloaded plugin加载砌体和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（），但它没有正确调整内容的大小，并且会在内容上重叠滚动条，直到窗口调整大小。

现在，当使用ajax加载新页面时，我还需要重新初始化jscrollpane。我在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('&lt;p&gt;Please wait...&lt;/&gt;').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();

如何在整个浏览器上重新初始化jscrollpane以获取ajax内容

1 个答案: