Изменение вертикального поля содержимого 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 axxis (так что свиток горизонтальный, а не вертикальный), а затем переместить элементы в <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))) так, чтобы он срабатывает, когда горизонтальная полоса прокрутки на правом краю.