开发者

Modifying a vertical jquery content box to scroll horizontally

I have been looking for a scrolling content box that loads the content (in my case, thumbnails) dynamically via ajax (instead of embedding it in the initial html). I found this one: http://webdeveloperplus.com/jquery/create-a-dynamic-scrolling-content-box-using-ajax/ that does exactly what I want, except it scrolls vertically. I really need a horizontal scroll. I only know enough javascript to be dangerous so all the tweaks I've tried to modify it haven't made it work.

I like this code because it just uses the jquery library, not an additional js addons.

$('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(开发者_StackOverflow中文版'Loading more items...');  
        $.get('new-items.html', '', function(newitems){  
            $('#content').append(newitems);  
            updatestatus();  
        });  
    }  
    setTimeout('scrollalert();', 1500);  
}  

Any suggestions for modifying it to scroll horizontally?


The idea is to make the overflow hidden on y axxis (so the scroll is horizontal, not vertical), and then rearange the items in the <div id="content"> with float:left and proper width/height so that they pop-up in a horizontal fashion.

Keep old css rules and add those:

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

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

You will also need to modify the condition if(scrolltop>=(scrollheight-(windowheight+scrolloffset))) so that it triggers when horizontal scroll is on the right edge.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜