This website uses cookies to personalise ads and to analyse traffic ok
web design

Horizontal custom scrollbar tutorial

Extensive tutorial for creating horizontally stacked content with the custom scrollbar plugin.

Demo

Toggle custom scrollbar on/off

Code examples

The following code examples assume you’ve already installed custom scrollbar plugin to your page.

Example with inline elements

Very simple markup and minimal CSS example with inline items and nowrap container

HTML

<div class="mcs-horizontal-example">
    <img src="path/to/image" class="item" /> 
    <img src="path/to/image" class="item" /> 
    <img src="path/to/image" class="item" /> 
    <!-- etc. -->
</div>

CSS

.mcs-horizontal-example{
  overflow-x: auto;
  white-space: nowrap;
}

.mcs-horizontal-example .item{
  display: inline-block;
}

Javascript

(function($){
  $(window).on("load",function(){
    $(".mcs-horizontal-example").mCustomScrollbar({
      axis:"x",
      theme:"dark-3"
    });
  });
})(jQuery);

If content contains elements that change dynamically (e.g. items are added or removed on-the-fly) enable autoExpandHorizontalScroll option parameter:

$(".mcs-horizontal-example").mCustomScrollbar({
  axis:"x",
  theme:"dark-3",
  advanced:{ autoExpandHorizontalScroll:true }
});

Example with floated elements

Commonly used markup with floated items

HTML

<div class="mcs-horizontal-example">
    <a href="#" class="item"><img src="path/to/image" /></a> 
    <a href="#" class="item"><img src="path/to/image" /></a> 
    <a href="#" class="item"><img src="path/to/image" /></a> 
    <!-- etc. -->
</div>

CSS

.mcs-horizontal-example{
  overflow-x: auto;
}

.mcs-horizontal-example .item{
  display: block;
  float: left;
}

Javascript

(function($){
  $(window).on("load",function(){
    $(".mcs-horizontal-example").mCustomScrollbar({
      axis:"x",
      theme:"dark-3",
      advanced:{
        autoExpandHorizontalScroll:true //optional (remove or set to false for non-dynamic/static elements)
      }
    });
  });
})(jQuery);

Example with lists

Classic markup with an unordered list containing items with multiple elements

HTML

<div class="mcs-horizontal-example">
    <ul>
        <li>
            <a href="#"><img src="path/to/image" /></a> <span>Some text...</span>
        </li> 
        <li>
            <a href="#"><img src="path/to/image" /></a> <span>Some text...</span>
        </li> 
        <li>
            <a href="#"><img src="path/to/image" /></a> <span>Some text...</span>
        </li> 
        <!-- etc. -->
    </ul>
</div>

CSS

.mcs-horizontal-example{
  overflow-x: auto;
}

.mcs-horizontal-example ul{
  white-space: nowrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mcs-horizontal-example ul > li{
  display: inline-block;
}

Javascript

(function($){
  $(window).on("load",function(){
    $(".mcs-horizontal-example").mCustomScrollbar({
      axis:"x",
      theme:"dark-3",
      advanced:{
        autoExpandHorizontalScroll:true //optional (remove or set to false for non-dynamic/static elements)
      }
    });
  });
})(jQuery);

CSS flexbox example

Example using CSS3 flexbox model

HTML

<div class="mcs-horizontal-example">
    <img src="path/to/image" class="item" /> 
    <img src="path/to/image" class="item" /> 
    <img src="path/to/image" class="item" /> 
    <!-- etc. -->
</div>

CSS

.mcs-horizontal-example{
  width: 100%;
  overflow-x: auto;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: row; flex-direction: row;
}

.mcs-horizontal-example .mCSB_container{
  display: -webkit-flex; display: flex;
}

.mcs-horizontal-example .item{
  -webkit-flex-shrink: 0; flex-shrink: 0;
}

Javascript

(function($){
  $(window).on("load",function(){
    $(".mcs-horizontal-example").mCustomScrollbar({
      axis:"x",
      theme:"dark-3",
      advanced:{
        autoExpandHorizontalScroll:true //optional (remove or set to false for non-dynamic/static elements)
      }
    });
  });
})(jQuery);

Stretched or contained images example

Making image items fit the visible area of the scrollable element

Demo

 

HTML

<div class="mcs-horizontal-example">
    <img src="path/to/image" class="item" /> 
    <img src="path/to/image" class="item" /> 
    <img src="path/to/image" class="item" /> 
    <!-- etc. -->
</div>

CSS

.mcs-horizontal-example{
  width: 640px;
  overflow-x: auto;
}

.mcs-horizontal-example .item{
  display: block;
  float: left;
}

Javascript

(function($){
  $(window).on("load",function(){
    $(".mcs-horizontal-example").mCustomScrollbar({
      axis:"x",
      theme:"dark-3",
      advanced:{
        autoExpandHorizontalScroll:true
      },
      callbacks:{
        onCreate:function(){
          $(this).find(".item").css("width",$(this).width());
        },
        onBeforeUpdate:function(){
          $(this).find(".item").css("width",$(this).width());
        }
      }
    });
  });
})(jQuery);

Contained text example

Making text elements like paragraphs fit the visible area of the scrollable element

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

HTML

<div class="mcs-horizontal-example">
    <p>Some text...</p>
    <img src="path/to/image" class="item" /> 
    <img src="path/to/image" class="item" /> 
    <img src="path/to/image" class="item" /> 
    <!-- etc. -->
</div>

CSS

.mcs-horizontal-example{
  width: 100%;
  overflow-x: auto;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: row; flex-direction: row;
  align-items: flex-start;
  -webkit-flex-shrink: 1; flex-shrink: 1;
}

.mcs-horizontal-example .mCSB_container{
  display: -webkit-flex; display: flex;
}

.mcs-horizontal-example .item{
  -webkit-flex: 1 0 auto; flex: 1 0 auto;
}

.mcs-horizontal-example p{
  -webkit-flex: 2 0 auto; flex: 2 0 auto;
  max-width: 100%;
  display: inline-block;
}

Javascript

(function($){
  $(window).on("load",function(){
    $(".mcs-horizontal-example").mCustomScrollbar({
      axis:"x",
      theme:"dark-3",
      advanced:{
        autoExpandHorizontalScroll:2
      },
      callbacks:{
        onCreate:function(){
          $(this).find("p").css("width",$(this).width());
        },
        onBeforeUpdate:function(){
          $(this).find("p").css("width",$(this).width());
        }
      }
    });
  });
})(jQuery);

Divi WordPress Theme


8 Comments

Post a comment
  1. Adriano
    Posted on June 7, 2017 at 17:20 Permalink

    Hi, seems that there is a bug when both scroll bars are active (vertical and horizontal) the trackpad horizontal scrolling stop working. Only the vertical one works.

    You can check this in the demo that have both scroll bards: http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html

    Reply
  2. Oliver Meyer
    Posted on February 22, 2017 at 00:34 Permalink

    Hi,

    your nice little plugin is working fine with WordPress (4.7.2).

    Just one question: on smaller screen resolutions (ie. 1280px) all images are in one row. but on larger screens (24” and up), the images are in two rows (see http://www.tg-a.de).

    Is there something I am doing wrong? Should I set a max-height?

    Thank you in advance!

    Reply
    • Oliver Meyer
      Posted on February 22, 2017 at 01:58 Permalink

      Anyway, I fixed it. It was ‘white-space: nowrap’ which has to be inserted in CSS.

      Reply
  3. X
    Posted on November 20, 2016 at 12:03 Permalink

    Hello,

    I have tried to implement horizontal scrolling on some tabs. However, once used, the scrollbar will continually follow the mouse. How can I fix this?

    The code can be seen in this fiddle: https://jsfiddle.net/3av8nopv/2

    Reply
    • malihu
      Posted on November 22, 2016 at 14:54 Permalink

      Hi,

      I’m getting console errors (e.g. about cross-origin iframe) in your jsfiddle. Have you tried running your code normally (outside of jsfiddle)? I just tested it and it works without issues.

      Reply
  4. Adil
    Posted on November 3, 2016 at 15:40 Permalink

    I’m trying to use this wonderful plugin in my project. However, I just can’t use it. After loading all the files successfully, I just can’t access the mCustomScrollbar() function.

    It is undefined even all the files are loaded successfully. I am unable to resolve the issue. Can you point me where I’m being wrong. The sample code is below.

    <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css" /> <title>The Title of the Page</title> </head> <body> <h1> The First Heading of the Page</h1> <div class="mcs-horizontal-example"> <!-- Some content for horizontal scrolling--> </div> <script src="https://code.jquery.com/jquery-2.1.0.min.js" integrity="sha256-8oQ1OnzE2X9v4gpRVRMb1DWHoPHJilbur1LP9ykQ9H0=" crossorigin="anonymous"></script> <script type="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script> <script> (function($){ $(window).on("load",function(){ console.log("Going to call the sc bar") $(".mcs-horizontal-example").mCustomScrollbar({ axis:"x", theme:"dark-3" }); }); })(jQuery); </script> </body> </html>

    Reply
    • malihu
      Posted on November 3, 2016 at 16:00 Permalink

      Hi,

      You have an error in your jquery.mCustomScrollbar.concat.min.js script tag. You’ve set type="javascript" which is not correct. It should be type="text/javascript".

      You could also simply remove the type attribute from the script.

      Reply
      • Adil
        Posted on November 5, 2016 at 15:04 Permalink

        Ahhh. I see. Well, thank you very much. I spent a lot of time and I was very angry at the undefined error in the console.

        Now, I see the reason behind it. Thanks mate!

        Reply

Post a comment

Cancel reply

Your e-mail is never published nor shared. 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=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php