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

jQuery custom content scroller

 

Code examples and tutorials

Responsive custom scrollbar with CSS3 media queries

How to use custom scrollbar plugin with CSS3 media queries and switch between vertical and horizontal scrollbars according to viewport size.

Scroll to id within element with custom scrollbar(s)

A simple jquery function to make all links pointing to id attributes within the page, work on content with custom scrollbars.

Horizontal custom scrollbar tutorial

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

 

Pages: 1 2 3 4


5,477 Comments

Post a comment

Comments pages: 1 78 79 80

  1. whizkid
    Posted on August 13, 2017 at 15:14 Permalink

    hi,
    I am using your scrollbars well. Thank you,

    By the way, in your service’s mobile page, your scrollbars “touch & scroll” does not seem to work well.

    Could you visit my page and check it by mobile?

    There is a problem with “#mCSB_1”.

    Reply
  2. rizwan
    Posted on August 13, 2017 at 08:05 Permalink

    how to set scrollbarposition:”outside” via html data attribute???????
    what is the data-attribute value?

    Reply
  3. El-Mahbub
    Posted on August 11, 2017 at 23:27 Permalink

    Very awesome, very fantastic, i like your plugin, this.

    Reply
  4. Joop
    Posted on August 6, 2017 at 16:15 Permalink

    First of all, thank you for your perfect plugin. Great work!

    I would like to change the cursor for .mCSB_dragger_bar to ‘grab’ / ‘grabbing’, but could not find a solution.
    Could you give me one?

    Reply
  5. Jack
    Posted on August 6, 2017 at 14:48 Permalink

    First of all, thank you for your perfect plugin. Great work!

    I would like to change the cursor for .mCSB_dragger_bar to ‘grab’ / ‘grabbing’, but could not find a solution.
    Could you give me one?

    Reply
  6. ساخت و طراحی سایت
    Posted on August 3, 2017 at 10:25 Permalink

    I used this scrollbar in some parts of my website that you can see and test its usage.
    Regards.

    Reply
  7. خرید هاست ارزان
    Posted on August 3, 2017 at 10:22 Permalink

    this is the easiest and most useful scrollbars that I used !
    Thanks

    Reply
  8. Quy Tran
    Posted on July 19, 2017 at 10:55 Permalink

    Thank you, i will try your plugin

    Reply
  9. Danesh
    Posted on July 18, 2017 at 17:33 Permalink

    Awesome. Easy to use.

    Reply
  10. ujwol
    Posted on July 12, 2017 at 22:09 Permalink

    can we put horizontal scrollbar at top and bottom both ?

    Reply
  11. Valdemar
    Posted on July 11, 2017 at 17:38 Permalink

    Hi! Can I disable event ‘mousewheel’ to make a some pause. Or how I can get original event? Thank you!

    Reply
  12. davy
    Posted on July 5, 2017 at 15:32 Permalink

    In the windows system in the implementation of the onTotalScroll (scroll down to the bottom), there will be delays, not at this time, Loading effect set, wait for a few seconds, will perform data request (when the rolling load of fabric will appear in this BUG) but this kind of phenomenon does not appear in the Mac, the loading effect will appear normal, who can help me solve this problem, thank you very much

    Reply
  13. ujwol
    Posted on June 30, 2017 at 20:19 Permalink

    hi,
    I applied above custom scrollbar to the table which have lots of row and column drag and drop features. but after applying this scrollbar I my drag and drop is not working on mobile device. any idea ?

    Reply
  14. rajthilak
    Posted on June 14, 2017 at 08:57 Permalink

    I need to implement custom scroll for selectbox with multiple. Is there any way to give it ?

    Reply
  15. Rikul
    Posted on June 13, 2017 at 14:55 Permalink

    hello i have one problem in this scrollbar..when i add scroll in dropdown its looks perfect but when i dragge scroll on mouse my dropdown closed

    Reply
  16. Adriano
    Posted on June 9, 2017 at 19:51 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

    Do you think this can be fix in next release? it is a great library, but this issue is a deal breaker…

    Reply
  17. Anton
    Posted on June 9, 2017 at 16:29 Permalink

    Hello Community,

    i love the Scrollbars and the Work of Manos. Big Respect. 🙂

    But I have a problem related to another javascript application.
    In the footer section, HIGHSLIDE HTML CONTENTS (under OUR SERVICES … important are “online shops” and “print media”) where the content scroller is used. Open the first time the scrollbar, after the close and reopen it does not load anymore.

    I could unsuccessfully reload the whole html page, but this is not really nice.

    How can I eliminate this?

    Here the Page: http://html5.graphic-family.de

    Thanks for your advice.

    Anton

    Reply
  18. Rob
    Posted on June 2, 2017 at 14:54 Permalink

    How can I set option to hide scrollbar and show only when my inside elements reach my height?
    Example I have:

    element 1
    element 2
    element 3
    element 4

    #contentwithscroll has set in customscrollbar height to 350px
    I’d like to hide it and show only when elements reach this 350px.
    This are notifications.

    Thanks

    Reply
    • Rob
      Posted on June 2, 2017 at 14:55 Permalink

      Sorry in previous message I forgot about code tags:

      How can I set option to hide scrollbar and show only when my inside elements reach my height?
      Example I have:
      <ul> <div id="contentwithscroll"> <li>element 1</li> <li>element 2</li> <li>element 3</li> <li>element 4</li> </div>
      #contentwithscroll has set in customscrollbar height to 350px
      I’d like to hide it and show only when elements reach this 350px.
      This are notifications.

      Thanks

      Reply
  19. G7495x
    Posted on June 2, 2017 at 00:43 Permalink

    Is it possible to change the space between the scrollbar and the content

    Reply
  20. noob
    Posted on June 1, 2017 at 16:00 Permalink

    I need to change the theme inside a dropdown scrollable menu. How to do it? I was trying to change inside the HTML and the script, but nothing works.
    My idea is to add an update to that scrollbar, but I don’t know how.
    Can you please help me?
    Thank you in advance

    HTML:

    @Auth.Current.SelectedAccount.Name

    @foreach (var account in Auth.Current.AvailableAccounts)
    {

    @account.Name

    }

    the script:
    $(“#accountSelectorDropdown”).mCustomScrollbar({
    scrollInertia: 550,
    scrollbarPosition: “outside”,
    theme: “minimal-black”
    });

    the result:
    mCSB_scrollTools mCSB_3_scrollbar mCS-light mCSB_scrollTools_vertical

    Reply
    • noob
      Posted on June 1, 2017 at 16:06 Permalink

      <div class="account-selector-container"> <div class="dropdown"> <button class="btn btn-default btn-block dropdown-toggle" type="button" id="accountSelector" data-toggle="dropdown"> <span class="pull-left accountname">@Auth.Current.SelectedAccount.Name</span> <span class="caret"></span> </button> <div class=" mCustomScrollbar dropdown-menu scrollable-menu" data-mc-theme="minimal-dark" role="menu" aria-labelledby="accountSelector"> <ul id="accountSelectorDropdown" class="" > @foreach (var account in Auth.Current.AvailableAccounts) { <li role="presentation" class="@(Auth.Current.SelectedAccountId == account.AccountId ? "active" : "")"> <a role="menuitem" tabindex="-1" href="javascript:;" data-accountid="@account.AccountId">@account.Name</a> </li> } </ul> </div> </div> </div>

      Reply
      • noob
        Posted on June 2, 2017 at 09:38 Permalink

        SOLVED!
        changed the default theme inside of the original script

        Reply
  21. Alex
    Posted on May 29, 2017 at 00:19 Permalink

    Hi. I have some problem on android devices with horizontal scroll. Touch events doesn’t work on a document on a content area with custom scrollbar. Though, i don’t have such problems with ios.

    My option for plugin initializathion:

    eventSlider.mCustomScrollbar({ axis:"x", advanced:{ autoExpandHorizontalScroll:true, updateOnImageLoad: false }, contentTouchScroll: true, documentTouchScroll: true });

    Help me please)))

    Reply
    • Serzhei
      Posted on June 1, 2017 at 13:41 Permalink

      css style:
      .mCustomScrollbar{ -ms-touch-action: inherit; touch-action: inherit; /* MSPointer events – direct all pointer events to js */ }
      .mCustomScrollbar.mCS_no_scrollbar{ -ms-touch-action: inherit; touch-action: inherit; }

      Reply
      • Alex
        Posted on June 1, 2017 at 23:58 Permalink

        Thank you so much!!! It works!

        Reply
      • Vincent
        Posted on June 29, 2017 at 17:38 Permalink

        Yes, thanks a million. Working just fine with css.

        Reply
      • Sreejith
        Posted on August 13, 2017 at 12:08 Permalink

        Thanks.. Works Great..

        Reply
  22. هاست رایگان
    Posted on May 9, 2017 at 12:57 Permalink

    thank you very much
    this post is very nice
    thank you

    Reply
  23. Dave
    Posted on May 7, 2017 at 16:15 Permalink

    Hello!
    I love your scroller – I just had a question if you think users can PAN inside the scrolled DIV by JUST PRESSING ONCE on the scrollable region and moving the scrollable content with one the finger – without having to switch back and forth between the upper and lower scroll bars?
    Thanking you for your fantastic product!
    Dave

    Reply
  24. Shandy Elliott
    Posted on April 27, 2017 at 05:18 Permalink

    It appears that the scrollbar is coded to only appear if the height of its content is EQUAL to or GREATER than its parent container (which seems appropriate by default). I have a situation where I only want the scrollbar to appear if its content is GREATER than its parent; if content and parent are equal in height, then I do not want the scrollbar to appear. I could explain why I want this behavior, but it’s not really material to the question.

    How can I script the scrollbar to ONLY appear if its content is GREATER than its parent (not EQUAL)?

    Reply

Comments pages: 1 78 79 80

Post a comment

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