가로 스크롤러에 jscrollPane autoReinitialise가 작동하지 않습니다.

Question

horizonal jScrollPane을 다시 초기화하는 데 문제가 있습니다. 페이지가로드 될 때 4 개의 이미지가 동적으로로드되고 사용자가 패널에서 스크롤하면 다음 4 개의 이미지가 표시됩니다. 다음 이미지는 표시되지만 .jspPane의 크기는 그대로이므로 허용되지 않습니다. 더 이상 막대를 스크롤 할 수 없습니다.

$(function() 
     { 
      var pane = $('.scroll-pane'); 
      pane.jScrollPane({showArrows: true,autoReinitialise: true}); 
      var contentPane = pane.data('jsp').getContentPane(); 
      var api = pane.data('jsp'); 
      var $rowItems = $('<p></p>'); 
      var showItems = 4; 
      var startItem = 0; 
      var itemWidth = 100; 

      contentPane.append($rowItems) 

      getThumbnails(startItem); 

      pane.scroll(function(){ 
       var paneWidth = $(this).width(); 
       var contentWidth = $rowItems.width(); 
       var scrollPosition = Math.abs(parseInt($('.jspPane').css('left'))); 
       console.log(contentWidth - paneWidth - scrollPosition); 
       if ((contentWidth - paneWidth - scrollPosition) < 10){      
        startItem = startItem + showItems; 
        getThumbnails(startItem); 
       } 
      }) 

      function getThumbnails(n){ 
       $.ajax({ 
        url : 'items.xml', 
        success : function(data){     
         for(var i = n; i< n + showItems; i++){ 
          $rowItems.append('<a href="'+ $(data).find('item').eq(i).attr('thumb') +'" id="pic'+ i +'"></a>'); 
          loadImageThumb($(data).find('item').eq(i).attr('thumb'), $(data).find('item').eq(i).attr('imageUrl'),$(data).find('item').eq(i).find('description').text(), i);     

         } 

        }    
       }) 
      } 

      function loadImageThumb(thumb, img, description, i){      
       var image = new Image();              
       $(image).load(function(){ 
        var height = 80, 
         $pic = $('#pic'+ i, $rowItems), 
         imgURL = $pic.attr('href');         
        $pic.attr('href',imgURL);       
        $(this).appendTo($pic).hide().fadeIn('slow'); 

       }).attr('src', thumb); 

      } 


     }); 

나는 수직 스크롤을 위해 유사한 코드를 사용하고 일을했다 : 여기

는 코드입니다. 미리 도움을 주셔서 대단히 감사드립니다.

Answer 1

문제점에 대한 해결책을 찾았습니다. 모든 요소의 너비가 필요합니다.