Scroll Horizontally on mouse wheel scroll – Example: Horizontal scroller showcase

11 years ago, June 8, 2013
Reading time: 1 mins

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);
     }
   });
Previous
Delegate / bind toggle event jquery
Next
Maintain single thread between two users in privatemsg module
© 2024 Anil Maharjan