修改垂直的jquery内容框，使其水平滚动

Question

我一直在寻找一个滚动内容框，通过ajax动态加载内容(在我的情况下，缩略图)(而不是将其嵌入初始html)。我找到了这个:http://webdeveloperplus.com/jquery/create-a-dynamic-scrolling-content-box-using-ajax/，它完全符合我的要求，除了它是垂直滚动的。我真的需要一个水平滚动。我只知道足够的javascript是危险的，所以我试图修改它的所有调整都没有使它工作。

我喜欢这段代码，因为它只使用jquery库，而不是额外的js插件。

$('document').ready(function(){  
    updatestatus();  
    scrollalert();  
});  
function updatestatus(){  
    //Show number of loaded items  
    var totalItems=$('#content p').length;  
    $('#status').text('Loaded '+totalItems+' Items');  
}  
function scrollalert(){  
    var scrolltop=$('#scrollbox').attr('scrollTop');  
    var scrollheight=$('#scrollbox').attr('scrollHeight');  
    var windowheight=$('#scrollbox').attr('clientHeight');  
    var scrolloffset=20;  
    if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))  
    {  
        //fetch new items  
        $('#status').text('Loading more items...');  
        $.get('new-items.html', '', function(newitems){  
            $('#content').append(newitems);  
            updatestatus();  
        });  
    }  
    setTimeout('scrollalert();', 1500);  
}  

有什么建议修改它水平滚动?

Answer 1

这个想法是让溢出隐藏在y轴上(所以滚动是水平的，而不是垂直的)，然后用float:left和适当的宽度/高度重新排列<div id="content">中的项目，使它们以水平方式弹出。

保留旧的css规则并添加:

#scrollbox {
    overflow: auto;
    overflow-y: hidden;
}
#content p {
  width: 20px;
  float: left;
  margin-left: 20px;
}

你还需要修改条件if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))，使它触发时，水平滚动是在右边缘