kamlekar / slim-scroll

HTML element scroll bar as replacement for default browser's scroll-bar. Design as you want using CSS.

Slim-scroll (JavaScript Scroll Library) ~ 4KB compressed

Slim scroll is a replacement of default scrollbar provided by browsers on Windows. This library lets you design the scroll-bar by using simple css properties. It is created using javascript and css.

Download  |  Github  |  Demo   |   CDNjs

Buy me a 🍺 or ☕

Tested on: IE9+, Chrome and Firefox.

Main Features:

• Easier to color the custom scrollbar using CSS.
• Can animate easily (check below properties for support).
• Re-evaluates when the container is fluid, vertically.

How to use:

• To make it work, include slimscroll.js in head tag.
• Apply height to the container in fixed units or percentage.
• Just design the scrollbar as you want by applying css classes as explained below.
• [In IE8] Apply high specificity to override normal styles given to the scroll bar.

and then:

Method 1 (with no added styles):

new slimScroll(Element);   // 'Element' is Javascript DOM object

Method 2 (with added styles):

or to add your own defined css styles:

new slimScroll(Element, {
  'wrapperClass': '',

  'scrollBarClass': '',

  'scrollBarContainerClass': '',  

  'scrollBarContainerSpecialClass': '',

  'scrollBarMinHeight': '',

  'scrollBarFixedHeight': '',

  'keepFocus': true/false
});

Explanation of above properties:

• wrapperClass (type - "string") : Mention wrapper class here.
• scrollBarClass (type - "string") : Mention scroll bar class here.
• scrollBarContainerClass (type - "string") : Mention scroll bar container class here.
• scrollBarContainerSpecialClass (type - "string") : This property is used to mention a class which will be applied only when the user is scrolling the content. Could be helpful while applying animations to the scroll bar.
• scrollBarMinHeight (type - "Integer") : Used to mention minimum scroll bar height here (without pixel unit)
• scrollBarFixedHeight (type - "Integer") : Used to mention scroll bar fixed height (without pixel unit). This makes sure to show the scroll bar height fixed even when content inside the container is increased.
• keepFocus (type - "Boolean") : Used to focus the container.

To make this work on height resize:

var customScroll = new slimScroll();
window.onresize = customScroll.resetValues;  // pure javascript example.

Note:

• Usage of the above mentioned properties is optional or as per need.
• Add higher specificity css to override the custom styles which are being applied by this library.
• Don't override the styles which are given highest specificity (!important) by this library (those styles are necessary to make this scroll library work).

How I got this thought:

I got this thought, when I found solution to hide the default scrollbar (using css) which was the requirement for a post on Stackoverflow.

The solution was simple but that is how I got this thought :).

Future implementations:

• Implement Horizontal Scrollbar.

---

If you find any issue(s), please file here.

slim-scroll's Issues

Add support for IE8

Somehow, this plugin is not supporting IE8 after adding getBoundingClientRect method in the plugin. This method seems to support IE4+ but I am not sure why this isn't supporting now. Will fix this soon.

https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect#Browser_compatibility

When zoomed in, unable to scroll the container.

Works when overflow: hidden is removed from the wrapper container.

resetValues() breaks scrolling with scroll wheel and arrow keys

On the demo page, if I resize the window, scrolling no longer works with the scroll wheel or arrow keys (it scrolls the entire page instead). Clicking and dragging the scrollbar itself still works. This seems to be due to the call to resetValues().

I'm using Chrome, on Windows 7.

Can't select the text inside the container

Scroll crash when scroller wrapper is smaller then scroll container

I got this issue when i got a fixed element in with i like to use slim scroll.

If content is smaller then the container and I'm adding the slim scroll i got error:

Uncaught TypeError: Cannot read property 'offsetHeight' of undefined

crated by this line (12):

i.h = i[S].offsetHeight;

and its annoying cause:

when this fails the code that i got in created is not executed. And if you resize window to the size that scroller is needed is not there. Css to hide original one is also not added so original scroll is visible.

I use resetValues() on window resize and this is not adding scroller if is not there.

The scroller actually do what I need and is simple so plus.

Second issue is that if you zoom out website hidden scroller begin to be visible :/ and also it create some additional space with elements that have 100% width in them

Please at list give me a hint how so solve first issue cause second one i got idea how to fix for my purposes.

Thanks

scroll misbehaving in position absolute/fixed container or when the scroll is in a scrolling page

Layout breaks on second call of ajax

When I call the slimscroll plugin on a component using ajax call, it works well. but when I hide the component and then showed again using another ajax call, the slimscroll breaks the component's child elements layout.

Smooth scrolling

Is it possible to implement smooth scrolling as well? That would be awesome!

TypeError: e.removeProp is not a function slimscroll.min.js:1:2231

I tried using

new slimScroll('.my-class');

I got error
TypeError: e.removeProp is not a function[Learn More] slimscroll.min.js:1:2231

No npm module or cdn?

Is there no npm module or CDN host for this? And if there is can you add to README?

In IE8, scroll is working even without dragging the mouse.

In IE8, sometimes while dragging the mouse, the cursor is transforming to a blocking cursor. When the cursor is in blocking form and the mouse dragging is released, the scroll is moving along with the cursor even the dragging is not set.

Disable scrolling when the user is dragging the scrollbar

Remove scroll bar width calculating code

Scroll bar width calculation is not necessary. Instead we can just increase the right css property to one assuring level which works on all browsers and also increasing the padding-right to same value.

slim-scroll scroll bar is not showing when using ng-repeat

slim-scroll scroll bar is not showing when using ng-repeat

Resizing deletes content if the scroll bar is no longer needed

Situation:
I am building a "event log" that can take any number of logs; each log entry is in it's own div element.

Problem:
I found that when you resize the browser height to a scale that the content can fit in, all of the elements within the .slimscroll partent container is deleted and only one log is shown because the others were deleted.

Possible solution:
Is there a way to take the elements from the .scroll-wrapper (using .innerHTML?) and just place the items back to the previously described parent element, or even easier, just hide the scroll bar once the wrapper height is less than the parent element's height?

it doesn't work for IE ?

it doesn't work for IE ?

Update Readme to show how to initialise

The Readme tells us to initialise the plugin using

new slimScroll(Element);

But I get an error when I do this, and when I check the JS and the demo I find it's actually

scroll.useSlimScroll()

Can you please update the readme to show the right method?

Scrollbar is not going till the end

When scrolled completely to the end, the scrollbar shows gap below.

How to implement on horizontal scrolling

Can't make it work with horizontal scrolling div. Can you include it in demonstration?

Bug Error in $watch

It has a fatal error that breaks everything in this part of the code, which causes the text to go up and down...

$scope.$watch(function() {
         return wrapperDomElement.scrollHeight;
       }, function(newValue, oldValue) {
         assignValues();
       }, true);

No way to move the scrollbar to the right / off of the scrollable content

.slimScrollBar is on top of the content which can interfere with the user's ability to read and digest the content. The scrollbar should at least have an option to appear outside (right next to) the scrollable content, preferably configurable to the pixel similar to the height option that slimScroll() accepts.

Overwriting the right css property of .slimScrollBar with for example -10px !important does in fact move the scrollbar to the right of the content, but because .slimScrollBar is position: absolute; and its parent div is overflow: hidden, the scrollbar will simply not be visible, thus defeating the purpose of beautiful scrollbars. The only (hacky) "fix" I've found is to apply margin-right to the div element, but this disrupts the layout's width (hence: hacky).

Thanks for your time!

Default scrollbar visible when slider with border.

I wanted to make a transparent slider with border, but that causes the default scrollbar to appears when slider reaches the bottom end.

To reproduce with inspector simply add to the demo:

.scroll {
border: thin solid;
}

Then scroll down until the end the left column text to see the default scrollbar appearing. I saw this with both Firefox 60.0.2 and Chrome 68.0.3440.106

Inner styles adding repeatedly on window height resize

If we keep on resize the window to and fro such that the scroll is applies and gets removed, the inner styles are getting added repeatedly.

Focus on first load

When i use it on all of page (A wrapper for page, after body), without clicking on scrollable area, scrolling is impossible with arrow keys. Using $.focus had no effect. How can i fix it?

This is where i'm using the plugin: 3mcando.com

Remove console logs

Or at least hide them behind a flag

mult slim scroll on single page is not working

Scrollbar is hiding when scrolled too fast.

In old and modern browsers, the scrollbar is going inside/crossing the container.

The default scrollbar is visible for a bit of time before the custom scrollbar initializes.

stacked scrollable containers

Any idea what's wrong with this? I think if it works without slimscroll, it should also work with slimscroll applied? http://jsfiddle.net/xyvo4r0a/3

When user release the mouse outside of the browser screen, the scroll bar is still moving along with the cursor

Does not work with textarea

I tried to use it with text area but it was not showing scroll

Instead of hiding the scrollbar, the container should be overflow: hidden

Moving the scrollbar to a fixed value (18px) which is approximately equal to the negative of scrollbar's width is actually not a safe assumption because in Mac, the scrollbar doesn't take space.

The other way around to solve this issue is to modify the component by keeping overflow:hidden and showing this component's scrollbar by observing through scroll event.

Help add package.json to upstream

Hi @kamlekar,
I'm a member of cdnjs. We hosted this library.
Could you please help me add package.json to upstream?
Thank you.

cdnjs/cdnjs#10469

Let the user reposition the scrollbar at any place, as their convenience.

Currently, the code is hardcoded to place the scrollbar at right side. Which can be override but it might make things complicated.

Horizontal scrolling

Yep, that would be awesome!

selection of content is happening while scrolling with mouse click

When the user is dragging the mouse to scroll, the content on the page is being selected.