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,578 Comments

Post a comment

Comments pages: 1 81 82 83

  1. User
    Posted on July 30, 2020 at 22:39 Permalink

    contentTouchScroll is not working while swiping left and right in mobile. Kindly provide me any solution for this.
    Thank you

    Reply
  2. Rebeka
    Posted on June 22, 2020 at 12:02 Permalink

    Download free all source WordPress, Plugin, Html templates, Psd…
    https://everydaytheme.com/

    Reply
  3. Rebeka
    Posted on June 22, 2020 at 11:57 Permalink

    Download free all source WordPress, Plugin, Html templates, Psd… at:
    https://everydaytheme.com/

    Reply
  4. Stefanie
    Posted on June 17, 2020 at 10:48 Permalink

    I have made the content of my scroller responsive, okay. But how can i adjust the “snapAmount” to the different values of height?

    Thank you for help.
    Stefanie

    Reply
  5. Web Inmotion
    Posted on May 29, 2020 at 08:43 Permalink

    Hi,

    We are using mCustomScrollbar and it’s working fine.

    while working with this… iFrame content on website gets removed.

    Can you suggest suitable solution for this ?
    Thank you.

    Reply
  6. sergey
    Posted on May 9, 2020 at 12:33 Permalink

    error with jquery v3.5.1

    Reply
  7. Carl
    Posted on April 21, 2020 at 06:21 Permalink

    trying to scrollTo a position in modal-body(fixed heigth and overflow-y:auto) from the main page when open the modal. I get the proper #id and listen for when its open
    $("#Modal").on('shown.bs.modal', function(){ $('#content').mCustomScrollbar('scrollTo',"#id"); });
    and nothing happens
    Any suggestions

    Reply
  8. Antoine
    Posted on April 17, 2020 at 00:08 Permalink

    Hi,
    is there a way to get mouseWheel back on body/html when onTotalScroll ?
    I tried, but I can’t figure how…
    Best regards,
    Antoine

    Reply
  9. Guest
    Posted on January 23, 2020 at 11:52 Permalink

    Hi,
    I am using Malihu scrollbar in my application but I am not able to use the scrollbar in mobile devices. please reply with solution

    Reply
  10. Ponnarasi
    Posted on January 2, 2020 at 14:18 Permalink

    I have implemented jQuery UI sortable in my project. In my implementation I have large number of records which around 10,000 at an average. I store the index of each record in my database.

    The implementation is working fine but due to mCustomScrollbar, the sorting feature is very jerky. The scrolling do not work properly when I reach last visible record.

    Reply
  11. Oguzhan
    Posted on December 25, 2019 at 08:34 Permalink

    Hello Malihu,

    I’m asking you to help me with something I’m stuck with.

    I have prepared a modal plugin.
    When it reaches the maximum height, mCustomScrollbar is activated.
    It works super.

    Only I have Selectize on my form pages.
    You cannot scroll through the Selectize menu with the mouse.
    The mouse works for mCustomScrollbar.

    I used the following parameter to cancel scrolling while on the Selectize element.
    But it didn’t work.
    The .selectize-control element is the top layer.

    Is there anything wrong?

    articlectnscroll.mCustomScrollbar({ theme: "minimal-dark", mouseWheel: { disableOver: ['.selectize-control', '.selectize-control *'] } });

    (Sorry, I used google translate for english)

    Reply
    • Poonam
      Posted on January 18, 2020 at 08:43 Permalink

      Hi,

      Did you got any solution for your problem.Recently I am facing same problem

      Reply
  12. Murat
    Posted on December 3, 2019 at 05:15 Permalink

    is this project alive?

    https://uzmanim.net

    Reply
  13. Elle
    Posted on November 14, 2019 at 06:39 Permalink

    Is there a way to make it work along with NodeJS and EJS? It seems to be buggy and won’t scroll properly

    Reply
  14. beni
    Posted on November 11, 2019 at 16:40 Permalink

    How can i use mCustomScrollbar for browser default scrollbar?

    Reply
    • beni
      Posted on November 11, 2019 at 16:43 Permalink

      I used:
      $("body").mCustomScrollbar({ theme: "minimal", scrollButtons: { enable: true } });

      but dose not work.

      Reply
  15. Bhavesh Vengurlekar
    Posted on October 4, 2019 at 10:20 Permalink

    I have to make the 1st section to sticky to top when I perform wheelscroll and also when I click on the link to go to specific section.

    Reply
  16. Dave
    Posted on September 20, 2019 at 16:05 Permalink

    Is there a Tutorial or video to use jQuery custom content scroller with the Elementor Page Builder – this is brilliant and exactly what I need for my site!

    Reply
  17. Marc
    Posted on September 19, 2019 at 16:11 Permalink

    I have an images slider inside the mCustomScrollbar and in mobile devices I can not swipe left this slider, because mCustomScroll prevents it. Is it possible to make Stop Propagation? Thanks!

    Reply
  18. Marth
    Posted on August 13, 2019 at 02:39 Permalink

    Is there a way within the plugin to hide the scrollbar but leave the arrow buttons for scrolling?

    Reply
  19. Peter
    Posted on August 10, 2019 at 16:46 Permalink

    How can I User mCustomScrollbar and AutoComplete

    focus:function(e,ui){
    /* scroll via keyboard */
    if(!ui.item){
    var first=$(“.ui-autocomplete li:first”);
    first.trigger(“mouseenter”);
    $(this).val(first.data(“uiAutocompleteItem”).label);
    }
    var el=$(“.ui-state-focus”).parent();
    if(!el.is(“:mcsInView”) && !el.is(“:hover”)){
    $(“.ui-autocomplete”).mCustomScrollbar(“scrollTo”,el,{scrollInertia:0,timeout:0});
    }
    },

    This code not working

    Reply
  20. codepopular
    Posted on July 11, 2019 at 23:11 Permalink

    Download Free html Template
    http://www.codepopular.com

    Reply
  21. Yvan COYAUD
    Posted on June 17, 2019 at 01:15 Permalink

    Hello,
    How can I decrease the width of the background of the scroll bar.
    I’m talking about reducing the size of the scroll bar, which is too far from the content to scroll.
    Thank you for your help

    YC

    Reply

Comments pages: 1 81 82 83

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