Remove scrollbar implementation for Mac

Need to check on Windows.
kamlekar · Nov 6, 2015 · 84807b9 · 84807b9
1 parent 720e28d
commit 84807b9
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 #Slim-scroll (_JavaScript Scroll Plugin_)
 
 
-Slim scroll is a replacement of default scrollbar provided by browsers. This plugin lets you design the scroll-bar by using simple css properties. It is created using javascript and css.
+Slim scroll is a replacement of default scrollbar provided by browsers on Windows. This plugin lets you design the scroll-bar by using simple css properties. It is created using javascript and css. This will change the style only if the default scrollbar looks ugly.
 
 [Download](/~https://github.com/venkateshwar/slim-scroll/releases/latest)&nbsp;&nbsp;| &nbsp;[Github](/~https://github.com/venkateshwar/slim-scroll/)
 

diff --git a/slimscroll.js b/slimscroll.js
@@ -141,7 +141,7 @@ var slimScroll = function(C, payload){
                 imp = " !important",
                 pA = "position:absolute"+imp,
                 // classes
-                w = pA+";overflow:auto"+imp+";left:0px;top:0px"+imp+";right:-18px;bottom:0px"+imp+";padding-right:8px"+imp+";",
+                w = pA+";overflow:auto"+imp+";left:0px;top:0px"+imp+";right:0px;bottom:0px"+imp+";padding-right:8px"+imp+";",
                 S = pA+";top:0px"+imp+";bottom:0px"+imp+";right:0px;left:auto;width:5px;cursor:pointer"+imp+";padding-right:0px"+imp+";",
                 s = pA+";background-color:#999;top:0px;left:0px;right:0px;",
                 //creating a sheet
@@ -192,6 +192,22 @@ var slimScroll = function(C, payload){
                 setAttr(i[s], 'data-scrollbar', '1');
                 assignValues();
 
+                var scrollBarWidth = C.offsetWidth - i[w].offsetWidth;
+                // Stretching the inner container so that the default scrollbar is completely invisible
+                if(Math.abs(scrollBarWidth) < 5){
+                    // Seems scrollbar isn't taking width.
+                    // So we can safely assume that the scrollbar looks beautiful 
+                    // Hence, lets not modify the default scrollbar 
+                    // Mostly, the scrollbar looks beautiful on Mac OSX
+
+                    // Removing our custom scroll component
+                    C.removeChild(i[S]);
+                    // returning to avoid further process
+                    return false;
+                }
+                else{
+                    i[w].style.right = scrollBarWidth + "px";
+                }
                 if(payload.keepFocus){
                     setAttr(i[w], 'tabindex', '-1');
                     i[w].focus();

diff --git a/test/index.html b/test/index.html
@@ -8,34 +8,40 @@
         <link rel="stylesheet" type="text/css" href="slimscroll.css" />
         <script>
             window.onload = function(){
-                var element = document.querySelectorAll('.slimScroll');
+                if(!navigator.userAgent.match('Macintosh')){
+                    var element = document.querySelectorAll('.slimScroll');
 
-                // Apply slim scroll plugin
-                var one = new slimScroll(element[0], {
-                    'wrapperClass': 'scroll-wrapper unselectable mac',
-                    'scrollBarContainerClass': 'scrollBarContainer',
-                    'scrollBarContainerSpecialClass': 'animate',
-                    'scrollBarClass': 'scroll',
-                    'keepFocus': true
-                });
-                var two = new slimScroll(element[1], {
-                    'wrapperClass': 'wrapper',
-                    'scrollBarContainerClass': 'scrollBarContainer',
-                    'scrollBarClass': 'scrollBar'
-                });
 
-                var three = new slimScroll(element[2], {
-                    'wrapperClass': 'scroll-wrap',
-                    'scrollBarContainerClass': 'scroll-bar-wrap',
-                    'scrollBarClass': 'scroll-bar'
-                });
+                    // Apply slim scroll plugin
+                    var one = new slimScroll(element[0], {
+                        'wrapperClass': 'scroll-wrapper unselectable mac',
+                        'scrollBarContainerClass': 'scrollBarContainer',
+                        'scrollBarContainerSpecialClass': 'animate',
+                        'scrollBarClass': 'scroll',
+                        'keepFocus': true
+                    });
+                    var two = new slimScroll(element[1], {
+                        'wrapperClass': 'wrapper',
+                        'scrollBarContainerClass': 'scrollBarContainer',
+                        'scrollBarClass': 'scrollBar'
+                    });
 
-                // resize example
-                // To make the resizing work, set the height of the container in PERCENTAGE
-                window.onresize = function(){
-                    one.resetValues();
-                    two.resetValues();
-                    three.resetValues();
+                    var three = new slimScroll(element[2], {
+                        'wrapperClass': 'scroll-wrap',
+                        'scrollBarContainerClass': 'scroll-bar-wrap',
+                        'scrollBarClass': 'scroll-bar'
+                    });
+
+                    // resize example
+                    // To make the resizing work, set the height of the container in PERCENTAGE
+                    window.onresize = function(){
+                        one.resetValues();
+                        two.resetValues();
+                        three.resetValues();
+                    }
+                }
+                else{
+                    document.write("For Mac users, this custom slimscroll styles will not be applied");
                 }
             }
         </script>