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 axxis上（所以滚动是水平的，而不是垂直的），然后用<div id="content">和float:left以及适当的宽度/高度重新排列#scrollbox { overflow: auto; overflow-y: hidden; } #content p { width: 20px; float: left; margin-left: 20px; }中的项目，以便它们以横向方式弹出。

保留旧的CSS规则并添加：

if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))

您还需要修改条件{{1}}，以便在水平滚动位于右边缘时触发。

修改垂直jquery内容框以水平滚动

1 个答案: