修改垂直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 和适当的宽度/高度，以便它们以水平方式弹出。

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

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

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

您还需要修改条件 if(scrolltop>=(scrollheight-(windowheight+scrolloffset))) 以便在水平滚动位于右边缘时触发。