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


17 Comments

Post a comment
  1. Surinder
    Posted on January 3, 2023 at 09:00 Permalink

    Very Nice

    Reply
  2. Naniesh
    Posted on December 16, 2022 at 16:55 Permalink

    Hi,

    Is there any way to scroll the scroll bar to active element on loading?

    Reply
  3. vipul
    Posted on November 16, 2022 at 12:35 Permalink

    Hi Malihu,

    please tell me how to do an infinite scroll left to right on the loop

    Reply
  4. Aaqib Khan
    Posted on November 1, 2022 at 15:58 Permalink

    Hi Mahilu,

    I have added slick carousel where I am displaying 4 slide at a time on page and rest of the slide I can see when I am scrolling the page via next button and here I have applied mahilu custom scroll bar plugin but every time it is displaying only one slide in page and second slide I can see when I am moving the scroll bar.
    How can I fix this issue.

    below is the slick carousel code:
    slider_container.slick({
    arrows: false,
    infinite: false,
    dots: false,
    loop: false,
    cssEase: ‘linear’,
    slidesToShow: 4,
    slidesToScroll: 1,
    speed: 400,
    autoplaySpeed: 10,
    waitForAnimate: true,
    });

    and below is the mahilu plugin code.

    $(“.slider”).mCustomScrollbar({
    axis:”x”,
    theme:”dark-thick”,
    //autoExpandScrollbar:true,
    advanced:{autoExpandHorizontalScroll:true},
    //updateOnContentResize:true,
    scrollbarPosition: ‘outside’,
    scrollInertia: 200,
    scrollButtons: true
    });

    Reply
  5. megha
    Posted on May 26, 2019 at 20:35 Permalink

    Hi,
    Is there any way to hide horizontal scroll bar?

    Reply
  6. Gino
    Posted on April 3, 2019 at 20:23 Permalink

    hola mi pregunta es como puedo manejar el script para poder detectar el scroll que se hace porque lo que quiero es cambiar estilos al logo para que se vea negro en fondo claro y blanco en fondo oscuro. no funciona con este codigo salgo en movil pero claro en movil el scroll es normal
    $(window).scroll(function() {
    if ($(“#logomove”).offset().top > 1160) {
    $(“#logomove”).addClass(“bg-inverse”);
    } else {
    $(“#logomove”).removeClass(“bg-inverse”);
    }
    });
    En esta web si se logro ese efecto de cambio de color al hacer el scroll pero no encuentro el codigo que lo hace
    http://www.studiobjork.com
    si alguien me pudiera ayudar
    Gracias

    Reply
  7. Nashboy
    Posted on February 14, 2019 at 15:57 Permalink

    how to use this in RTL body? and the horizontal scrollbar always scrolls from right to left.

    please help me with this.

    Reply
  8. kalpesh
    Posted on August 29, 2018 at 18:28 Permalink

    $(“.content_6”).mCustomScrollbar({
    horizontalScroll:true,
    advanced:{
    autoExpandHorizontalScroll:true
    }
    });

    I have tried to use horizontal scroll in bootstrap modal but it’s not wokring.

    Reply
  9. Vickie
    Posted on February 2, 2018 at 18:57 Permalink

    Hey, great plugin!

    Was wondering if there’s an easy way to disable the scroll on mobile, and simply display images as stacked on top of one another.

    Thanks!

    Reply
  10. 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
  11. 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
  12. 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
  13. 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