Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Add z-index for thumbs to options #33

Closed
coeamyd opened this Issue · 0 comments

2 participants

@coeamyd

I have a situation where I'm using overscroll to scroll an area on the main page. There are items in this area that open a jQuery UI dialog, that needs to sit above the scrollbars, so I parameterized its z-index accordingly. Now I also need to use overscroll inside this dialog, but the thumbs won't show, since they have a fixed z-index below the dialog.

Unified diff of required changes:

@@ -91,7 +92,8 @@
                 wheelDelta: o.constants.wheelDelta,
                 scrollDelta: o.constants.scrollDelta,
                 direction: 'multi',
-                cancelOn: ''
+                cancelOn: '',
+                zIndex: 999
             }, options);

             // check for inconsistent directional restrictions
@@ -132,13 +135,13 @@
                     data.thumbs = {};

                     if (data.sizing.container.scrollWidth > 0 && options.direction !== 'vertical') {
-                        data.thumbs.horizontal = $(o.div).css(o.getThumbCss(data.sizing.thumbs.horizontal))
+                        data.thumbs.horizontal = $(o.div).css(o.getThumbCss(data.sizing.thumbs.horizontal, data.options.zIndex))
                                     .css({ opacity: options.persistThumbs ? o.constants.thumbOpacity : 0 });
                         target.prepend(data.thumbs.horizontal);
                     }

-                    if (data.sizing.container.scrollHeight > 0 && options.direction !== 'horizontal') {
-                        data.thumbs.vertical = $(o.div).css(o.getThumbCss(data.sizing.thumbs.vertical))
+                    if (data.sizing.container.scrollHeight > 0 && options.direction !== 'horizontal') {
+                        data.thumbs.vertical = $(o.div).css(o.getThumbCss(data.sizing.thumbs.vertical, data.options.zIndex))
                                     .css({ opacity: options.persistThumbs ? o.constants.thumbOpacity : 0 });
                         target.prepend(data.thumbs.vertical);
                     }
@@ -506,7 +517,7 @@
         },

         // gets the CSS object for a thumb
-        getThumbCss: function (size) {
+        getThumbCss: function (size, zIndex) {

             return {
                 position: "absolute",
@@ -517,7 +528,7 @@
                 "-moz-border-radius": size.corner + "px",
                 "-webkit-border-radius": size.corner + "px",
                 "border-radius": size.corner + "px",
-                "z-index": "999"
+                "z-index": zIndex
             };

         }
@azoff azoff closed this in f86cc67
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.