jQuery custom content scroller
Highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQuery mousewheel plugin), keyboard and touch support, ready-to-use themes and customization via CSS, RTL direction support, option parameters for full control of scrollbar functionality, methods for triggering actions like scroll-to, update, destroy etc., user-defined callbacks and more.
Current version 3.1.5 (Changelog)
Upgrading from version 2
How to use it
Get started by downloading the archive which contains the plugin files (and a large amount of HTML demos and examples). Extract and upload jquery.mCustomScrollbar.concat.min.js, jquery.mCustomScrollbar.css and mCSB_buttons.png to your web server (alternatively you can load plugin files from a CDN).
HTML
Include jquery.mCustomScrollbar.css in the head tag your HTML document (more info)
<link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" />
Include jQuery library (if your project doesn’t use it already) and jquery.mCustomScrollbar.concat.min.js in the head tag or at the very bottom of your document, just before the closing body tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>
CSS
The element(s) you want to add scrollbar(s) should have the typical CSS properties of an overflowed block which are a height (or max-height) value, an overflow value of auto (or hidden) and content long enough to require scrolling. For horizontal scrollbar, the element should have a width (or max-width) value set.
If you prefer to set your element’s height/width via javascript, you can use the setHeight
/setWidth
option parameters.
Initialization
Initialize via javascript
After files inclusion, call mCustomScrollbar function on the element selector you want to add the scrollbar(s)
<script> (function($){ $(window).on("load",function(){ $(".content").mCustomScrollbar(); }); })(jQuery); </script>
Initialize via HTML
Add the class mCustomScrollbar
to any element you want to add custom scrollbar(s) with default options. Optionally, set its axis via the HTML data attribute data-mcs-axis
(e.g. "x"
for horizontal and "y"
for vertical) and its theme via data-mcs-theme
. For example:
<div class="mCustomScrollbar" data-mcs-theme="dark"> <!-- your content --> </div>
Basic configuration & option parameters
axis
By default, the script applies a vertical scrollbar. To add a horizontal or 2-axis scrollbars, invoke mCustomScrollbar function with the axis option set to "x"
or "yx"
respectively
$(".content").mCustomScrollbar({ axis:"x" // horizontal scrollbar });
$(".content").mCustomScrollbar({ axis:"yx" // vertical and horizontal scrollbar });
theme
To quickly change the appearance of the scrollbar, set the theme option parameter to any of the ready-to-use themes available in jquery.mCustomScrollbar.css, for example:
$(".content").mCustomScrollbar({ theme:"dark" });
Configuration
You can configure your scrollbar(s) using the following option parameters on mCustomScrollbar function
Usage $(selector).mCustomScrollbar({ option: value });
setWidth: false
- Set the width of your content (overwrites CSS width), value in pixels (integer) or percentage (string).
setHeight: false
- Set the height of your content (overwrites CSS height), value in pixels (integer) or percentage (string).
setTop: 0
- Set the initial css top property of content, accepts string values (css top position).
Example:setTop: "-100px"
.
setLeft: 0
- Set the initial css left property of content, accepts string values (css left position).
Example:setLeft: "-100px"
.
axis: "string"
- Define content’s scrolling axis (the type of scrollbars added to the element: vertical and/of horizontal).
Available values:"y"
,"x"
,"yx"
.axis: "y"
– vertical scrollbar (default)axis: "x"
– horizontal scrollbaraxis: "yx"
– vertical and horizontal scrollbars
scrollbarPosition: "string"
- Set the position of scrollbar in relation to content.
Available values:"inside"
,"outside"
.
SettingscrollbarPosition: "inside"
(default) makes scrollbar appear inside the element. SettingscrollbarPosition: "outside"
makes scrollbar appear outside the element. Note that setting the value to"outside"
requires your element (or parent elements) to have CSSposition: relative
(otherwise the scrollbar will be positioned in relation to document’s root element).
scrollInertia: integer
- Set the amount of scrolling momentum as animation duration in milliseconds.
Higher value equals greater scrolling momentum which translates to smoother/more progressive animation. Set to0
to disable.
autoDraggerLength: boolean
- Enable or disable auto-adjusting scrollbar dragger length in relation to scrolling amount (same bahavior with browser’s native scrollbar).
SetautoDraggerLength: false
when you want your scrollbar to (always) have a fixed size.
autoHideScrollbar: boolean
- Enable or disable auto-hiding the scrollbar when inactive.
SettingautoHideScrollbar: true
will hide the scrollbar(s) when scrolling is idle and/or cursor is out of the scrolling area.
Please note that some special themes like “minimal” overwrite this option.
autoExpandScrollbar: boolean
- Enable or disable auto-expanding the scrollbar when cursor is over or dragging the scrollbar.
alwaysShowScrollbar: integer
- Always keep scrollbar(s) visible, even when there’s nothing to scroll.
alwaysShowScrollbar: 0
– disable (default)alwaysShowScrollbar: 1
– keep dragger rail visiblealwaysShowScrollbar: 2
– keep all scrollbar components (dragger, rail, buttons etc.) visible
snapAmount: integer
- Make scrolling snap to a multiple of a fixed number of pixels. Useful in cases like scrolling tabular data, image thumbnails or slides and you need to prevent scrolling from stopping half-way your elements. Note that your elements must be of equal width or height in order for this to work properly.
To set different values for vertical and horizontal scrolling, use an array:[y,x]
snapOffset: integer
- Set an offset (in pixels) for the snapAmount option. Useful when for example you need to offset the snap amount of table rows by the table header.
mouseWheel:{ enable: boolean }
- Enable or disable content scrolling via mouse-wheel.
mouseWheel:{ scrollAmount: integer }
- Set the mouse-wheel scrolling amount (in pixels). The default value
"auto"
adjusts scrolling amount according to scrollable content length.
mouseWheel:{ axis: "string" }
- Define the mouse-wheel scrolling axis when both vertical and horizontal scrollbars are present.
Setaxis: "y"
(default) for vertical oraxis: "x"
for horizontal scrolling.
mouseWheel:{ preventDefault: boolean }
- Prevent the default behaviour which automatically scrolls the parent element when end or beginning of scrolling is reached (same bahavior with browser’s native scrollbar).
mouseWheel:{ deltaFactor: integer }
- Set the number of pixels one wheel notch scrolls. The default value “auto” uses the OS/browser value.
mouseWheel:{ normalizeDelta: boolean }
- Enable or disable mouse-wheel (delta) acceleration. Setting
normalizeDelta: true
translates mouse-wheel delta value to -1 or 1.
mouseWheel:{ invert: boolean }
- Invert mouse-wheel scrolling direction. Set to
true
to scroll down or right when mouse-wheel is turned upwards.
mouseWheel:{ disableOver: [array] }
- Set the tags that disable mouse-wheel when cursor is over them.
Default value:["select","option","keygen","datalist","textarea"]
scrollButtons:{ enable: boolean }
- Enable or disable scrollbar buttons.
scrollButtons:{ scrollAmount: integer }
- Set the buttons scrolling amount (in pixels). The default value
"auto"
adjusts scrolling amount according to scrollable content length.
scrollButtons:{ scrollType: "string" }
- Define the buttons scrolling type/behavior.
scrollType: "stepless"
– continuously scroll content while pressing the button (default)scrollType: "stepped"
– each button click scrolls content by a certain amount (defined in scrollAmount option above)
scrollButtons:{ tabindex: integer }
- Set a tabindex value for the buttons.
keyboard:{ enable: boolean }
- Enable or disable content scrolling via the keyboard.
The plugin supports the directional arrows (top, left, right and down), page-up (PgUp), page-down (PgDn), Home and End keys.
keyboard:{ scrollAmount: integer }
- Set the keyboard arrows scrolling amount (in pixels). The default value
"auto"
adjusts scrolling amount according to scrollable content length.
keyboard:{ scrollType: "string" }
- Define the keyboard arrows scrolling type/behavior.
scrollType: "stepless"
– continuously scroll content while pressing the arrow key (default)scrollType: "stepped"
– each key release scrolls content by a certain amount (defined in scrollAmount option above)
contentTouchScroll: integer
- Enable or disable content touch-swipe scrolling for touch-enabled devices.
To completely disable, setcontentTouchScroll: false
.
Integer values define the axis-specific minimum amount required for scrolling momentum (default:25
).
documentTouchScroll: boolean
- Enable or disable document touch-swipe scrolling for touch-enabled devices.
advanced:{ autoExpandHorizontalScroll: boolean }
- Auto-expand content horizontally (for
"x"
or"yx"
axis).
If set totrue
, content will expand horizontally to accommodate any floated/inline-block elements.
Setting its value to2
(integer) forces the non scrollHeight/scrollWidth method. A value of3
forces the scrollHeight/scrollWidth method.
advanced:{ autoScrollOnFocus: "string" }
- Set the list of elements/selectors that will auto-scroll content to their position when focused.
For example, when pressing TAB key to focus input fields, if the field is out of the viewable area the content will scroll to its top/left position (same bahavior with browser’s native scrollbar).
To completely disable this functionality, setautoScrollOnFocus: false
.
Default:"input,textarea,select,button,datalist,keygen,a[tabindex],area,object,[contenteditable='true']"
advanced:{ updateOnContentResize: boolean }
- Update scrollbar(s) automatically on content, element or viewport resize.
The value should betrue
(default) for fluid layouts/elements, adding/removing content dynamically, hiding/showing elements etc.
advanced:{ updateOnImageLoad: boolean }
- Update scrollbar(s) automatically each time an image inside the element is fully loaded.
Default value isauto
which triggers the function only on"x"
and"yx"
axis (if needed).
The value should betrue
when your content contains images and you need the function to trigger on any axis.
advanced:{ updateOnSelectorChange: "string" }
- Update scrollbar(s) automatically when the amount and size of specific selectors changes.
Useful when you need to update the scrollbar(s) automatically, each time a type of element is added, removed or changes its size.
For example, settingupdateOnSelectorChange: "ul li"
will update scrollbars each time list-items inside the element are changed.
Setting the value totrue
, will update scrollbars each time any element is changed.
To disable (default) set tofalse
.
advanced:{ extraDraggableSelectors: "string" }
- Add extra selector(s) that’ll release scrollbar dragging upon mouseup, pointerup, touchend etc.
Example:extraDraggableSelectors: ".myClass, #myID"
advanced:{ releaseDraggableSelectors: "string" }
- Add extra selector(s) that’ll allow scrollbar dragging upon mousemove/up, pointermove/up, touchend etc.
Example:releaseDraggableSelectors: ".myClass, #myID"
advanced:{ autoUpdateTimeout: integer }
- Set the auto-update timeout in milliseconds.
Default timeout:60
theme: "string"
- Set the scrollbar theme.
View all ready-to-use themes
All themes are contained in plugin’s CSS file (jquery.mCustomScrollbar.css).
Default theme:"light"
callbacks:{ onCreate: function(){} }
- A function to call when plugin markup is created.
Example:
callbacks:{ onCreate:function(){ console.log("Plugin markup generated"); } }
callbacks:{ onInit: function(){} }
- A function to call when scrollbars have initialized (demo).
Example:
callbacks:{ onInit:function(){ console.log("Scrollbars initialized"); } }
callbacks:{ onScrollStart: function(){} }
- A function to call when scrolling starts (demo).
Example:
callbacks:{ onScrollStart:function(){ console.log("Scrolling started..."); } }
callbacks:{ onScroll: function(){} }
- A function to call when scrolling is completed (demo).
Example:
callbacks:{ onScroll:function(){ console.log("Content scrolled..."); } }
callbacks:{ whileScrolling: function(){} }
- A function to call while scrolling is active (demo).
Example:
callbacks:{ whileScrolling:function(){ console.log("Scrolling..."); } }
callbacks:{ onTotalScroll: function(){} }
- A function to call when scrolling is completed and content is scrolled all the way to the end (bottom/right) (demo).
Example:
callbacks:{ onTotalScroll:function(){ console.log("Scrolled to end of content."); } }
callbacks:{ onTotalScrollBack: function(){} }
- A function to call when scrolling is completed and content is scrolled back to the beginning (top/left) (demo).
Example:
callbacks:{ onTotalScrollBack:function(){ console.log("Scrolled back to the beginning of content."); } }
callbacks:{ onTotalScrollOffset: integer }
- Set an offset for the onTotalScroll option.
For example, settingonTotalScrollOffset: 100
will trigger the onTotalScroll callback 100 pixels before the end of scrolling is reached.
callbacks:{ onTotalScrollBackOffset: integer }
- Set an offset for the onTotalScrollBack option.
For example, settingonTotalScrollBackOffset: 100
will trigger the onTotalScrollBack callback 100 pixels before the beginning of scrolling is reached.
callbacks:{ alwaysTriggerOffsets: boolean }
- Set the behavior of calling onTotalScroll and onTotalScrollBack offsets.
By default, callback offsets will trigger repeatedly while content is scrolling within the offsets.
SetalwaysTriggerOffsets: false
when you need to trigger onTotalScroll and onTotalScrollBack callbacks once, each time scroll end or beginning is reached.
callbacks:{ onOverflowY: function(){} }
- A function to call when content becomes long enough and vertical scrollbar is added.
Example:
callbacks:{ onOverflowY:function(){ console.log("Vertical scrolling required"); } }
callbacks:{ onOverflowX: function(){} }
- A function to call when content becomes wide enough and horizontal scrollbar is added.
Example:
callbacks:{ onOverflowX:function(){ console.log("Horizontal scrolling required"); } }
callbacks:{ onOverflowYNone: function(){} }
- A function to call when content becomes short enough and vertical scrollbar is removed.
Example:
callbacks:{ onOverflowYNone:function(){ console.log("Vertical scrolling is not required"); } }
callbacks:{ onOverflowXNone: function(){} }
- A function to call when content becomes narrow enough and horizontal scrollbar is removed.
Example:
callbacks:{ onOverflowXNone:function(){ console.log("Horizontal scrolling is not required"); } }
callbacks:{ onBeforeUpdate: function(){} }
- A function to call right before scrollbar(s) are updated.
Example:
callbacks:{ onBeforeUpdate:function(){ console.log("Scrollbars will update"); } }
callbacks:{ onUpdate: function(){} }
- A function to call when scrollbar(s) are updated.
Example:
callbacks:{ onUpdate:function(){ console.log("Scrollbars updated"); } }
callbacks:{ onImageLoad: function(){} }
- A function to call each time an image inside the element is fully loaded and scrollbar(s) are updated.
Example:
callbacks:{ onImageLoad:function(){ console.log("Image loaded"); } }
callbacks:{ onSelectorChange: function(){} }
- A function to call each time a type of element is added, removed or changes its size and scrollbar(s) are updated.
Example:
callbacks:{ onSelectorChange:function(){ console.log("Scrollbars updated"); } }
live: "string"
- Enable or disable applying scrollbar(s) on all elements matching the current selector, now and in the future.
Setlive: true
when you need to add scrollbar(s) on elements that do not yet exist in the page. These could be elements added by other scripts or plugins after some action by the user takes place (e.g. lightbox markup may not exist untill the user clicks a link).
If you need at any time to disable or enable the live option, setlive: "off"
and"on"
respectively.
You can also tell the script to disable live option after the first invocation by settinglive: "once"
.
liveSelector: "string"
- Set the matching set of elements (instead of the current selector) to add scrollbar(s), now and in the future.
Plugin methods
Ways to execute various plugin actions programmatically from within your script(s).
update
Usage $(selector).mCustomScrollbar("update");
Call the update method to manually update existing scrollbars to accommodate new content or resized element(s). This method is by default called automatically by the script (via updateOnContentResize
option) when the element itself, its content or scrollbar size changes.
scrollTo
Usage $(selector).mCustomScrollbar("scrollTo",position,options);
Call the scrollTo method to programmatically scroll the content to the position parameter (demo).
position parameter
Position parameter can be:
"string"
- e.g. element selector:
"#element-id"
- e.g. special pre-defined position:
"bottom"
- e.g. number of pixels less/more:
"-=100"
/"+=100"
- e.g. element selector:
integer
- e.g. number of pixels:
100
- e.g. number of pixels:
[array]
- e.g. different y/x position:
[100,50]
- e.g. different y/x position:
object/function
- e.g. jQuery object:
$("#element-id")
- e.g. js object:
document.getelementbyid("element-id")
- e.g. function:
function(){ return 100; }
- e.g. jQuery object:
Pre-defined position strings:
"bottom"
– scroll to bottom"top"
– scroll to top"right"
– scroll to right"left"
– scroll to left"first"
– scroll to the position of the first element within content"last"
– scroll to the position of the last element within content
Method options
scrollInertia: integer
- Scroll-to duration, value in milliseconds.
Example:
$(selector).mCustomScrollbar("scrollTo","bottom",{ scrollInertia:3000 });
scrollEasing: "string"
- Scroll-to animation easing, values:
"linear"
,"easeOut"
,"easeInOut"
.
Example:
$(selector).mCustomScrollbar("scrollTo","bottom",{ scrollEasing:"easeOut" });
moveDragger: boolean
- Scroll scrollbar dragger (instead of content).
Example:
$(selector).mCustomScrollbar("scrollTo",80,{ moveDragger:true });
timeout: integer
- Set a timeout for the method (the default timeout is 60 ms in order to work with automatic scrollbar update), value in milliseconds.
Example:
$(selector).mCustomScrollbar("scrollTo","top",{ timeout:1000 });
callbacks: boolean
- Trigger user defined callbacks after scroll-to completes.
Example:
$(selector).mCustomScrollbar("scrollTo","left",{ callbacks:false });
stop
Usage $(selector).mCustomScrollbar("stop");
Stops any running scrolling animations (usefull when you wish to interupt a previously scrollTo method call).
disable
Usage $(selector).mCustomScrollbar("disable");
Calling disable method will temporarily disable the scrollbar (demo). Disabled scrollbars can be re-enable by calling the update method.
To disable the scrollbar and reset its content position, set the method’s reset parameter to true
$(selector).mCustomScrollbar("disable",true);
destroy
Usage $(selector).mCustomScrollbar("destroy");
Calling destroy method will completely remove the custom scrollbar and return the element to its original state (demo).
Scrollbar styling & themes
You can design and visually customize your scrollbars with pure CSS, using jquery.mCustomScrollbar.css which contains the default/basic styling and all scrollbar themes.
The easiest/quickest way is to select a ready-to-use scrollbar theme. For example:
$(selector).mCustomScrollbar({ theme:"dark" });
You can modify the default styling or any theme either directly in jquery.mCustomScrollbar.css or by overwriting the CSS rules in another stylesheet.
Creating a new scrollbar theme
Create a name for your theme (e.g. “my-theme”) and set it as the value of the theme option
$(selector).mCustomScrollbar({ theme:"my-theme" });
Your element will get the class “mCS-my-theme” (your theme-name with “mCS” prefix), so you can create your CSS using the .mCS-my-theme
in your rules. For instance:
.mCS-my-theme.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: red; } .mCS-my-theme.mCSB_scrollTools .mCSB_draggerRail{ background-color: white; } /* and so on... */
In the same manner you can clone any existing theme (e.g. “dark”), change its selector (e.g. .mCS-dark
) to your own theme name (e.g. .mCS-my-theme
) and modify its CSS rules.
Scrollbar markup
The plugin applies specific id (unique) and/or classes to every scrollbar element/component, meaning that you can target and modify any scrollbar in more than one ways.
For example, every element with a scrollbar gets a unique class in the form of _mCS_1
, _mCS_2
etc. Every scrollbar container element gets a unique id in the form of mCSB_1_scrollbar_vertical
, mCSB_2_scrollbar_vertical
etc. Every scrollbar dragger gets a unique id in the form of mCSB_1_dragger_vertical
, mCSB_2_dragger_vertical
etc. in addition to the class mCSB_dragger
. All these mean that you can do stuff like:
._mCS_1 .mCSB_dragger .mCSB_dragger_bar{ background-color: red; } ._mCS_2 .mCSB_dragger .mCSB_dragger_bar{ background-color: green; } #mCSB_3_dragger_vertical .mCSB_dragger_bar{ background-color: blue; } #mCSB_1_scrollbar_vertical .mCSB_dragger{ height: 100px; } #mCSB_1_scrollbar_horizontal .mCSB_dragger{ width: 100px; } .mCSB_1_scrollbar .mCSB_dragger .mCSB_draggerRail{ width: 4px; }
User-defined callbacks
You can trigger your own js function(s) by calling them inside mCustomScrollbar callbacks option parameter
$(".content").mCustomScrollbar({ callbacks:{ onScroll:function(){ myCustomFn(this); } } }); function myCustomFn(el){ console.log(el.mcs.top); }
In the example above, each time a scroll event ends and content has stopped scrolling, the content’s top position will be logged in browser’s console. There are available callbacks for each step of the scrolling event:
onScrollStart
– triggers the moment a scroll event startswhileScrolling
– triggers while scroll event is runningonScroll
– triggers when a scroll event completesonTotalScroll
– triggers when content has scrolled all the way to bottom or rightonTotalScrollBack
– triggers when content has scrolled all the way back to top or left
You can set an offset value (pixels) for both onTotalScroll
and onTotalScrollBack
by setting onTotalScrollOffset
and onTotalScrollBackOffset
respectively (view example).
By default, onTotalScroll
and onTotalScrollBack
callbacks are triggered repeatedly. To prevent multiple calls when content is within their offset, set alwaysTriggerOffsets
option to false
(view example).
Additional callbacks:
onInit
onOverflowY
onOverflowX
onOverflowYNone
onOverflowXNone
onUpdate
onImageLoad
onSelectorChange
Returning values
The script returns a number of values and objects related to scrollbar that you can use in your own functions
this
– the original element containing the scrollbar(s)this.mcs.content
– the original content wrapper as jquery objectthis.mcs.top
– content’s top position (pixels)this.mcs.left
– content’s left position (pixels)this.mcs.draggerTop
– scrollbar dragger’s top position (pixels)this.mcs.draggerLeft
– scrollbar dragger’s left position (pixels)this.mcs.topPct
– content vertical scrolling percentagethis.mcs.leftPct
– content horizontal scrolling percentagethis.mcs.direction
– content’s scrolling direction (y or x)
Plugin-specific jQuery expressions
$("#myID:mcsInView")
- Select element(s) in your content that are within scrollable viewport.
As condition:$("#myID").is(":mcsInView");
$(".content:mcsOverflow")
- Select overflowed element(s) with visible scrollbar.
As condition:$(".content").is(":mcsOverflow");
$("#myID:mcsInSight")
$("#myID:mcsInSight(exact)")
- Select element(s) in your content that are in view of the scrollable viewport. Using the
exact
parameter will include elements that have any part of them (even 1 pixel) in view of the scrollable viewport.
As condition:$("#myID").is(":mcsInSight");
,$("#myID").is(":mcsInSight(exact)");
Plugin dependencies & requirements
- jQuery version 1.6.0 or higher
- Mouse-wheel support
License
This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.
https://opensource.org/licenses/MIT
Donating helps greatly in developing and updating free software and running this blog 🙂
Hi,
I plan to have a hidden div in the content, which may consist of several text fields. By clicking an “Add more” button, this hidden div will be display. However, after clicking the button to show the hidden div, the height of the content doesn’t expand automatically, so a portion of the content will be cropped. What can I do to “refresh” the height after the hidden div is shown?
Thanks.
Hi,
You need to re-call mCustomScrollbar function each time you update the content. Check section “Dynamically loaded content” of the post.
Hello malihu,
This is really nice stuff! But unfortunately it doesnt seem to work on my dropdown box. How do i get this scrollbar to work within my dropdown. This dropdown box is also scripted with jQuery from devirtuoso.com
I really hope there’s a workaround. Really like the scrollbars.
Mike
Hello,
I have a website with dynamically generated content so I can’t have a function call for each div ID, is there a way to make this work with a single class name so I can have a random number of scrollable divs on the same document?
Thnx!
Of course! Just insert your class name instead of an ID in the function selector. For example:
$(“.mcs_container”).mCustomScrollbar(“vertical”,400,”easeOutCirc”,1.05,”auto”,”yes”,”yes”,10);
Apparently we cannot use the latest version of jQuery (1.7) with this [excellent] scollbar solution? 1.6.4 works, but 1.7 does not respond to the scrollwheel.
Indeed! Please download the updated version (3.0.6 works correctly with jquery 1.7) of the jquery-mousewheel plugin here:
https://github.com/brandonaaron/jquery-mousewheel/downloads
Direct link to version 3.0.6:
https://github.com/downloads/brandonaaron/jquery-mousewheel/jquery-mousewheel-3.0.6.zip
Thanks malihu! We were seeing this issue after upgrade to jQuery 1.7. Upgrading mousehweel to 3.0.6 fixed the issue (from 3.0.2 in our case)
Would be nice if this page had an alternative to the huge comment stream, but just a thought.
Thanks!
I have one problem!
I have to use scroll in scroll, but when I do get the scroll is crazy!=S
what can i do for help my problem?
I was searching so long for very good custom scrollbar until I found yours 😀
I had some trouble with the installation caused of my browser, but it works now 🙂
but now I have a new Problem: I installed the nivo plugin. and now the nivo plugin is working but the custom scroller wont work 🙁
how can I fix it?
now I see that the scrollbar seems to have a conflict with nextgen too
Anchors navigation # not work in this plugin… ?
really nice thank you for this great plugin
hi there, thank you for the tutorial on how to create a custom scrollbar using jquery, very impressive result.
i’ve tried to include your script into a tab menu for each tab/div. But only the 1st tab (which is the default tab when i enter the page) works. the rest of the tabs the scroll bar doesn’t work at all. i couldn’t find a solution for it.
by the way, i realised that within the .content it doesn’t allow floating elements in it. Or else the scrollbar will not work accordingly. i tried to put an empty div with clear:both css but still doesn’t resolve the matter.
Thank You
hey, i love your plug-in! thanks, you are a life saver.
Quick Question: Is it possible to use both vertical and horizontal scrollbars on the same container?
Not at the moment…
I’m trying to use your script but am having some problems… I have a container that holds some dynamic content. However, when I use the mouse wheel to scroll through the content, the only time it works is if I’m hovering directly over the data. So, if the content happens to scroll off the screen, it’s very difficult to get it to come back down using the scroll wheel. I have to use the scroll button next to the container. What I think should happen is that it should scroll as long as I’m hovering anywhere over the container.
To see this, you can go to http://berlin.medialayer.net/~echofly/html/rods.php
Can you please tell me what I’m doing wrong here? Thanks a lot! And love the scroller.
I have the same problem. Especially in ie8/ie9. Scrolling only works when the mouse is hovering directly over the text and not on the space between text and text-lines…
I hope someone can provide a solution to this.
Thanks in advance!
I found a solution in adding a background color to the surrounding div…
Hi to all!
i’m new here.
I’ve a problem. This plugin doesn’t work correctly in IE9, because the content inside the div, goes overflow. I can’t see the jquery scrollbar
Hi all! I’m using the horizontal scroll with images linked to a html, but I have a little problem: when I click an image the scroll moves some steps to the right before loading the other html, any ideas why is this happening?
Thanks to all in advance.
hi,great plugin
dont know if you have already developed it, but i needed a scrollto method for your plugin, so i’ve implemented is as an external function, scrollerScrollToX for Hor and scrollerScrollToY for Ver scroller
maybe is it possible to integrate it – in a better code – as an internal method of your plugin
regards.
alessio
the code
——————————————————
function scrollerScrollToX(refid,valTo){
if (valTo>0)
{
var $dragger=$(“#”+refid+” .dragger”);
var $customScrollBox=$(“#”+refid+” .customScrollBox”);
var $customScrollBox_container=$(“#”+refid+” .customScrollBox .container”);
var $dragger_container=$(“#”+refid+” .dragger_container”);
container_width=$customScrollBox.width(); content_width=$customScrollBox_container.width(); drag_width=$dragger_container.width();
dragger_width=$dragger.width();
if (valTo>(content_width-container_width)) valTo=content_width-container_width;
var scrollAmount=(content_width-container_width)/(drag_width-dragger_width);
var btnsScrollTo=parseInt(valTo/scrollAmount);
var scrollSpeed=Math.abs($dragger.position().left-btnsScrollTo)*(100/150);
$dragger.stop().animate({left: btnsScrollTo}, scrollSpeed,”linear”);
$customScrollBox_container.stop().animate({left: “-=”+valTo}, 300, “easeOutCirc”);
}}
function scrollerScrollToY(refid,valTo){
if (valTo>0)
{
var $dragger=$(“#”+refid+” .dragger”);
var $customScrollBox=$(“#”+refid+” .customScrollBox”);
var $customScrollBox_container=$(“#”+refid+” .customScrollBox .container”);
var $dragger_container=$(“#”+refid+” .dragger_container”);
container_height=$customScrollBox.height(); content_height=$customScrollBox_container.height(); drag_height=$dragger_container.height();
dragger_height=$dragger.height();
if (valTo>(content_height-container_height)) valTo=content_height-container_height;
var scrollAmount=(content_height-container_height)/(drag_height-dragger_height);
var btnsScrollToY=parseInt(valTo/scrollAmount);
var scrollSpeed=Math.abs($dragger.position().left-btnsScrollToY)*(100/150);
$dragger.stop().animate({top: btnsScrollToY}, scrollSpeed,”linear”);
$customScrollBox_container.stop().animate({top: “-=”+valTo}, 300, “easeOutCirc”);
}}
Great! Thanks 🙂
Thank you for a good script!
I’m trying to make a horizontal website with your script, I encountered one problem.
Instead of your thumb images, I put ‘ul, li’ codes in there. After then, the scroll function stopped. In my interpretation, It supports only simple image tags. Where do i have to modify this script? I’m an just web designer in Korea but a developer. I’m striving to solve this problem for few days.
Can you help me?
how to maintain the scroll position when dynamically add content using ajax or any thing else
hi
can anyone tell me how to maintain the scroll position using this script
or this for webkit (before was from opera)
commenting out these parts helped
/*$dragger.draggable({ axis: "x", containment: "parent", drag: function(event, ui) { ScrollX(); }, stop: function(event, ui) { DraggerRelease(); } });*/ /*$dragger.draggable({ axis: "y", containment: "parent", drag: function(event, ui) { Scroll(); }, stop: function(event, ui) { DraggerRelease(); } });*/
ever seen this error ?
nice one – thx for sharing; greece power !
in this page you have the dragger_container inside the .container .. this will not float:left the scrollbar – please adjust like you have it in the source; dragger_container has to be placed in the .customScrollBox
you really like different cursors though 😉
Wonderful script! Thank you very much.
Now a question for everyone:
I’m trying to make the scroller “jump” a fixed amount of pixels when you click the arrows, or when you drag it. Is that possible? Any ideas? I’m not a javascript expert, but maybe with some hints I can do it.
Cheers!
Very nice plug in. One problem though: While the code works very well on a stand alone page (either php or html), when I place the code inside a component of a Joomla site, it doesnt run one of the javascripts (it doesnt implement the: ui_draggable class). Any ideas on why this might be happening?
Ok, I tried something that manos mentioned in an earlier post and it worked!!!
This is what I did:
[quote]
In your document, wrap the script with (function($){… and …})(jQuery); making it like this:
(function($){
$(window).load(function() {
$(“#mcs_container”).mCustomScrollbar(“vertical”,400,”easeOutCirc”,1.05,”auto”,”yes”,”yes”,10);
});
})(jQuery);
You may also need to add jQuery.noConflict(); right before (function($){. Depending on the order you load the libraries (prototype, jquery etc.), adding this might help.
Edit jquery.mCustomScrollbar.js and do the same by adding (function($){ as the 1st line and })(jQuery); as the last line of the script.
[/quote]
And Additionally I placed the javascripts at the root of the site (will move them to appropriate folders once I get home. )
Manos you are the best, vre!!!
Sorry to bother you but I was trying to use this scrollbar I really like it is there a way to center the track when the button is being pushed? Could I add hover to the drag? Also most importantly how can I add the same scroll bar customization to more than one div? Or is that not possible?
Hi, this plugin is great and does everything I need but I’m having a crazy problem with the horizontal thumbnail slider demo.
The example file works perfectly in IE8/9 and if I re-save it with notepad it still works fine. However if I open it with Dreamweaver CS5 and save it again then in IE the last thumb is pushed down to below the others.
If I compare the notepad and Dreamweaver files the content is identical. I think I’m going mad, can you shed any light on this?
Many thanks!
This seems to be an issue with the extra space between inline-block elements. In your markup, try to have each of your thumbnails tags on the same line, without any space or tab between them. For example:
<a href="#" rel="nofollow">...</a><a href="#" rel="nofollow">...</a><a href="#" rel="nofollow">...</a>
Thanks for the reply, I removed the spaces between the elements but it doesn’t seem to help. I’ve actually replaced the thumbnails with divs as I want to have content in there.
Like I say, it seems to be that Dreamweaver is doing something to the files that is causing the problem. I’ve discovered a workaround, if I work in Dreamweaver and then copy the code into notepad and save it there then it works. Not ideal but it will have to do until I can sort this out.
Thanks for your help and thanks for the plugin!
Hi Malihu,
Your tool is so simple to implement and such a wonderful resource to use in projects.
I had a question about the reset of the scroll bar and content. When you add in new content and reinitilize the scroll function, is there a way to keep the scroll bar where it is along with the content. For example I have an element in side of your scroll bar that has the ability to expand and collapse. Obviously when I expand I re-init your scroll component, and when I collapse I re-init again. Is there a way to keep the positions where they are OR a method for me to implement so any init after the first one keeps the location to where it is?
The URL you can find my site on is: http://www.thethespians.co.uk/videohome
I’m developing a new site and I need help with the scroll bar being integrated into tubepress youtube channel feed – as you can see, it’s there, but it’s scrolling the wrong way!
Hi,
I think I found a bug. If initially the scroller is initialized with a long content (with scroller) and then reinitialized with a shorter content(without scroller), although the scroller is gone but the mousewheel is still bound. Scrolling with the mouse wheel will result the content inside it to disappear. I’ve modified your code and added mousewheel unbind when handling shorter content.
Khai.
Hi Malihu,
I hope you can help me. I used your script in one of the sites I am developing. The script works great in all pages except the home page. For some reason, the content scrolls to the wrong direction. When I drag sa scrollbar down, the content scrolls along with it.
I have read above that it must be that the value of targY is positive. Tried modifying the code but I am not able to make it to work.
Please see http://dev2.firstplanbcompany.com/demo-eurosweethearts/ … this site is in the works.
Thank you for your help. 🙂
I have exactly this problem.
I’m using WordPress and this occurs when I introduce into the mix.
I have tried all the work arounds that I can find including the correct registering and re-registering of jQuery and using jQuery in no-conflict mode and yet the content is still moving with the scroll bar and the increments are positive rather than negative.
Anyhelp would be appreciated.
Thanks,
Chris.
Hi Malihu,
Just in love with your plugin!!
Congrats and thanks for all the update;
i’d like to set up 2 div ( with the same style )with the custom scroll bar
so i just respect the syntax of the HTML and i add an unique Id and nothing happen?
check out the link ( i’ve been using the demo page and duplicate the div “mcs3_container”
and i ve called it “mcs6_container ”
Example with 2 div with the same style
Any light would be appreciated
I add this in the script
$(window).load(function() { mCustomScrollbars(); $("#mcs6_container").mCustomScrollbar(); // to make the scroll bar appear // });
Regards
Hi Maxime,
Thanks for your comments 🙂
You don’t need to add
$("#mcs6_container").mCustomScrollbar();
on window load cause you already call it correctly inside mCustomScrollbars();. Just remove it from your window load function.
Hi Malihu ,
Thanks for your answer 😉
i’ve just remove this line
$(“#mcs6_container”).mCustomScrollbar();
as you adviced me
Result
This time the scroll bar don’t show up? only the first div (#mcs3_container) can scroll but not the second !
That’s for sure i ‘m really missing something
i took the demo example so that i don’t have to put to much extra code
and keep it simple to see my mistakes …
i have to admit i m still in the dark
can you light up my path?
Since you want #mcs6_container to scroll vertically, you need to set the scroll type parameter of its mCustomScrollbar function call to “vertical” (currently you have it “horizontal”).
Just change this:
$("#mcs6_container").mCustomScrollbar("horizontal",500,"easeOutCirc",1,"auto","yes","yes",0);
to this:
$("#mcs6_container").mCustomScrollbar("vertical",500,"easeOutCirc",1,"auto","yes","yes",0);
EUREKA!!!
I can see the light again yeaaaaaaah
thanks a tone MALIHU you Rock man!!!
check out this small showcase with your fantastic scroll bar
Now i ‘m able to add more scrollbars menu
thanks again!!!
Great script!
I implemented it on this site http://www.thomaspagani.com but each time I resize the browser window I got this error:
$dragger.position() is null [Interrompi per questo errore] if($dragger.position().top<$dragger_container.height()-$dragger.height()){
How can I fix it?
thanks
daniele