Question

我在重新初始化水平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);

            }


        });

我对垂直scrollPane使用了类似的代码，它确实有用。非常感谢您的帮助。

Answer 1

我找到了解决问题的方法。每个元素的宽度都是必要的。

jscrollPane auto重新初始化不适用于水平滚动

1 个答案: