修改垂直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轴上的溢出隐藏（所以滚动是水平的，而不是垂直的），然后重新排列<div id="content">中的项目float:left和适当的宽度/高度，以便它们以水平方向弹出时尚。

保留旧的CSS规则，并添加这些：

#scrollbox { 
    overflow: auto; 
    overflow-y: hidden; 
} 

#content p { 
    width: 20px; 
    float: left; 
    margin-left: 20px; 
} 

您还需要使其触发时水平滚动的右侧边修改的状况if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))。