Have u ever wanted to have a horizontal unlimited scroller to showcase items on your site? Here I have discussed how it can be achieved,

First of all HTML, 

<div class="friends">
  <ul class="friends-list">
    <li class="friend-thumbnail">Friend 1 </li>
    <li class="friend-thumbnail">Friend 2 </li>
    <li class="friend-thumbnail">Friend 3 </li>
  </ul>
</div>
 

You can horizontally place list items by floating the list items to left and dynamically assign the container's width to product of number of items and width of individual item. This should look something like


.friends-list li{
  float: left;
}


$('.friends-list').width($('.friends-list>li').length * 180); // 180 is the width of each item

That done and some css to remove vertical scroll and add horizontal scroll to the container of the list, looks something like,


.friends{
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
}

To convert mousewheel scroll to scroll content horizontally instead of vertically we require.

  1. jQuery
  2. jQuery.Mouswheel Plugin

$('.friends-list').mousewheel(function(e){
    if(e.originalEvent.wheelDelta < 0){
         $('.friends').scrollLeft($('.friends').scrollLeft()+50);
       }else{
         $('.friends').scrollLeft($('.friends').scrollLeft()-50);
     }
   });

Comments

comments

Uncategorized

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>