diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5818f63 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +.netbeans.xml +.sass-cache +node_modules +nbproject \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index e252025..c0a6748 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,11 +1,18 @@ -

v0.3.0 beta (not stable)

-Code refactoring to support class-based structure
+

v0.2.11 (20160803)

+Fix bug with Mozilla FireFox + +

v0.2.10 (20151216)

+Increase version to update bower repository + +

v0.2.9 (20151022)

+Increase version to update bower repository

v0.2.8 (20150723)

Add Meteor/Node modules support
Fix bug when removed content does not update element's height
Fix bug with textarea in non-webkit browsers
Update webkit-based browser detection to ignore Microsoft Edge browser
+Change default values for ignoreMobile/ignoreOverlay to false

v0.2.7 (20150122)

Small fixes
@@ -14,7 +21,7 @@ Small fixes
Re-register plugin in jQuery plugins repository

v0.2.5 (20141119)

-Add option ignoreOverlay
+Add option ignoreOverlay with default value true
Fix webkit-based browser detection
Ignore Firefox in Mac OS (cannot hide native scrollbars)
@@ -63,4 +70,4 @@ Fix webkit bug with text selection
Handle mousedown instead of click on scrollbar track/arrows

v0.0.2 (20130413)

-First version
\ No newline at end of file +First version
diff --git a/README.md b/README.md index fac3633..e0c576d 100644 --- a/README.md +++ b/README.md @@ -10,9 +10,10 @@ Cross-browser CSS customizable scrollbar with advanced features:
  • Vertical, horizontal or both scrollbars
  • Automatically reinitialize scrollbar
  • External scrollbars support
    • -
  • Browser support: IE7+, Firefox, Opera, Chrome, Safari
    • +
  • Browser support: IE7+, Firefox1, Opera, Chrome, Safari
  • jQuery Scrollbar as Angular.JS directive
  • Textarea scrollbar
    • +
  • RTL support2

    • Basic Scrollbars Demo

    @@ -21,7 +22,7 @@ Cross-browser CSS customizable scrollbar with advanced features:

    Documentation

    Changelog

    -

    Download

    +

    Download

    - -Please download stable version from link above. Current version 0.3.0 is not stable. +1 There is known issue that native browser scrollbar cannot be hidden in Firefox on Apple devices, so this plugin is not initialized and you will see native scrollbars. +2 Experimental support in master branch, styles for scrollbars are not updated diff --git a/bower.json b/bower.json index 61388ff..36deb3a 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "jquery.scrollbar", - "version": "0.2.8", + "version": "0.2.11", "main": [ "./jquery.scrollbar.js", "./jquery.scrollbar.css" diff --git a/jquery.scrollbar.css b/jquery.scrollbar.css index 9f4e5ba..e0a7df5 100644 --- a/jquery.scrollbar.css +++ b/jquery.scrollbar.css @@ -1,791 +1,904 @@ /*************** SCROLLBAR BASE CSS ***************/ - .scroll-wrapper { - overflow: hidden !important; - padding: 0 !important; - position: relative; + overflow: hidden !important; + padding: 0 !important; + position: relative; } - .scroll-wrapper > .scroll-content { - border: none !important; - box-sizing: content-box !important; - height: auto; - left: 0; - margin: 0; - max-height: none; - max-width: none !important; - overflow: scroll !important; - padding: 0; - position: relative !important; - top: 0; - width: auto !important; + border: none !important; + box-sizing: content-box !important; + height: auto; + left: 0; + margin: 0; + max-height: none; + max-width: none !important; + overflow: scroll !important; + padding: 0; + position: relative !important; + top: 0; + width: auto !important; } - .scroll-wrapper > .scroll-content::-webkit-scrollbar { - height: 0; - width: 0; + height: 0; + width: 0; +} +.scroll-wrapper.scroll--rtl { + direction: rtl; } .scroll-element { - display: none; -} -.scroll-element, .scroll-element div { - box-sizing: content-box; + box-sizing: content-box; + display: none; } - -.scroll-element.scroll-x.scroll-scrollx_visible, -.scroll-element.scroll-y.scroll-scrolly_visible { - display: block; +.scroll-element div { + box-sizing: content-box; } - .scroll-element .scroll-bar, .scroll-element .scroll-arrow { - cursor: default; + cursor: default; +} +.scroll-element.scroll-x.scroll-scrollx_visible, .scroll-element.scroll-y.scroll-scrolly_visible { + display: block; } .scroll-textarea { - border: 1px solid #cccccc; - border-top-color: #999999; + border: 1px solid #cccccc; + border-top-color: #999999; } .scroll-textarea > .scroll-content { - overflow: hidden !important; + overflow: hidden !important; } .scroll-textarea > .scroll-content > textarea { - border: none !important; - box-sizing: border-box; - height: 100% !important; - margin: 0; - max-height: none !important; - max-width: none !important; - overflow: scroll !important; - outline: none; - padding: 2px; - position: relative !important; - top: 0; - width: 100% !important; + border: none !important; + box-sizing: border-box; + height: 100% !important; + margin: 0; + max-height: none !important; + max-width: none !important; + overflow: scroll !important; + outline: none; + padding: 2px; + position: relative !important; + top: 0; + width: 100% !important; } .scroll-textarea > .scroll-content > textarea::-webkit-scrollbar { - height: 0; - width: 0; + height: 0; + width: 0; } - - - - - - - - /*************** SIMPLE INNER SCROLLBAR ***************/ - .scrollbar-inner > .scroll-element, -.scrollbar-inner > .scroll-element div -{ - border: none; - margin: 0; - padding: 0; - position: absolute; - z-index: 10; +.scrollbar-inner > .scroll-element div { + border: none; + margin: 0; + padding: 0; + position: absolute; + z-index: 10; } .scrollbar-inner > .scroll-element div { - display: block; - height: 100%; - left: 0; - top: 0; - width: 100%; + display: block; + height: 100%; + left: 0; + top: 0; + width: 100%; } .scrollbar-inner > .scroll-element.scroll-x { - bottom: 2px; - height: 8px; - left: 0; - width: 100%; + bottom: 2px; + height: 8px; + left: 0; + width: 100%; } .scrollbar-inner > .scroll-element.scroll-y { - height: 100%; - right: 2px; - top: 0; - width: 8px; + height: 100%; + right: 2px; + top: 0; + width: 8px; } .scrollbar-inner > .scroll-element .scroll-element_outer { - overflow: hidden; + overflow: hidden; } .scrollbar-inner > .scroll-element .scroll-element_outer, .scrollbar-inner > .scroll-element .scroll-element_track, .scrollbar-inner > .scroll-element .scroll-bar { - -webkit-border-radius: 8px; - -moz-border-radius: 8px; - border-radius: 8px; + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; } .scrollbar-inner > .scroll-element .scroll-element_track, .scrollbar-inner > .scroll-element .scroll-bar { - -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; - filter: alpha(opacity=40); - opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + opacity: 0.4; } -.scrollbar-inner > .scroll-element .scroll-element_track { background-color: #e0e0e0; } -.scrollbar-inner > .scroll-element .scroll-bar { background-color: #c2c2c2; } -.scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #919191; } -.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; } - - -/* update scrollbar offset if both scrolls are visible */ - -.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; } -.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; } - - -.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; } -.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; } - - +.scrollbar-inner > .scroll-element .scroll-element_track { + background-color: #e0e0e0; +} +.scrollbar-inner > .scroll-element .scroll-bar { + background-color: #c2c2c2; +} +.scrollbar-inner > .scroll-element:hover .scroll-bar { + background-color: #919191; +} +.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { + background-color: #919191; +} +/* update scrollbar offset if both scrolls are visible */ +.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { + left: -12px; +} +.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { + top: -12px; +} +.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { + left: -12px; +} +.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { + top: -12px; +} /*************** SIMPLE OUTER SCROLLBAR ***************/ - .scrollbar-outer > .scroll-element, -.scrollbar-outer > .scroll-element div -{ - border: none; - margin: 0; - padding: 0; - position: absolute; - z-index: 10; +.scrollbar-outer > .scroll-element div { + border: none; + margin: 0; + padding: 0; + position: absolute; + z-index: 10; } .scrollbar-outer > .scroll-element { - background-color: #ffffff; + background-color: #ffffff; } .scrollbar-outer > .scroll-element div { - display: block; - height: 100%; - left: 0; - top: 0; - width: 100%; + display: block; + height: 100%; + left: 0; + top: 0; + width: 100%; } .scrollbar-outer > .scroll-element.scroll-x { - bottom: 0; - height: 12px; - left: 0; - width: 100%; + bottom: 0; + height: 12px; + left: 0; + width: 100%; } .scrollbar-outer > .scroll-element.scroll-y { - height: 100%; - right: 0; - top: 0; - width: 12px; + height: 100%; + right: 0; + top: 0; + width: 12px; +} + +.scrollbar-outer > .scroll-element.scroll-x .scroll-element_outer { + height: 8px; + top: 2px; } -.scrollbar-outer > .scroll-element.scroll-x .scroll-element_outer { height: 8px; top: 2px; } -.scrollbar-outer > .scroll-element.scroll-y .scroll-element_outer { left: 2px; width: 8px; } +.scrollbar-outer > .scroll-element.scroll-y .scroll-element_outer { + left: 2px; + width: 8px; +} -.scrollbar-outer > .scroll-element .scroll-element_outer { overflow: hidden; } -.scrollbar-outer > .scroll-element .scroll-element_track { background-color: #eeeeee; } +.scrollbar-outer > .scroll-element .scroll-element_outer { + overflow: hidden; +} + +.scrollbar-outer > .scroll-element .scroll-element_track { + background-color: #eeeeee; +} .scrollbar-outer > .scroll-element .scroll-element_outer, .scrollbar-outer > .scroll-element .scroll-element_track, .scrollbar-outer > .scroll-element .scroll-bar { - -webkit-border-radius: 8px; - -moz-border-radius: 8px; - border-radius: 8px; + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; } -.scrollbar-outer > .scroll-element .scroll-bar { background-color: #d9d9d9; } -.scrollbar-outer > .scroll-element .scroll-bar:hover { background-color: #c2c2c2; } -.scrollbar-outer > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; } +.scrollbar-outer > .scroll-element .scroll-bar { + background-color: #d9d9d9; +} +.scrollbar-outer > .scroll-element .scroll-bar:hover { + background-color: #c2c2c2; +} + +.scrollbar-outer > .scroll-element.scroll-draggable .scroll-bar { + background-color: #919191; +} /* scrollbar height/width & offset from container borders */ +.scrollbar-outer > .scroll-content.scroll-scrolly_visible { + left: -12px; + margin-left: 12px; +} -.scrollbar-outer > .scroll-content.scroll-scrolly_visible { left: -12px; margin-left: 12px; } -.scrollbar-outer > .scroll-content.scroll-scrollx_visible { top: -12px; margin-top: 12px; } +.scrollbar-outer > .scroll-content.scroll-scrollx_visible { + top: -12px; + margin-top: 12px; +} -.scrollbar-outer > .scroll-element.scroll-x .scroll-bar { min-width: 10px; } -.scrollbar-outer > .scroll-element.scroll-y .scroll-bar { min-height: 10px; } +.scrollbar-outer > .scroll-element.scroll-x .scroll-bar { + min-width: 10px; +} +.scrollbar-outer > .scroll-element.scroll-y .scroll-bar { + min-height: 10px; +} /* update scrollbar offset if both scrolls are visible */ +.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { + left: -14px; +} -.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -14px; } -.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -14px; } - -.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -14px; } -.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -14px; } - - - - - - - +.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { + top: -14px; +} +.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { + left: -14px; +} +.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { + top: -14px; +} /*************** SCROLLBAR MAC OS X ***************/ - .scrollbar-macosx > .scroll-element, -.scrollbar-macosx > .scroll-element div -{ - background: none; - border: none; - margin: 0; - padding: 0; - position: absolute; - z-index: 10; +.scrollbar-macosx > .scroll-element div { + background: none; + border: none; + margin: 0; + padding: 0; + position: absolute; + z-index: 10; } .scrollbar-macosx > .scroll-element div { - display: block; - height: 100%; - left: 0; - top: 0; - width: 100%; + display: block; + height: 100%; + left: 0; + top: 0; + width: 100%; } -.scrollbar-macosx > .scroll-element .scroll-element_track { display: none; } -.scrollbar-macosx > .scroll-element .scroll-bar { - background-color: #6C6E71; - display: block; - - -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - filter: alpha(opacity=0); - opacity: 0; - - -webkit-border-radius: 7px; - -moz-border-radius: 7px; - border-radius: 7px; +.scrollbar-macosx > .scroll-element .scroll-element_track { + display: none; +} - -webkit-transition: opacity 0.2s linear; - -moz-transition: opacity 0.2s linear; - -o-transition: opacity 0.2s linear; - -ms-transition: opacity 0.2s linear; - transition: opacity 0.2s linear; +.scrollbar-macosx > .scroll-element .scroll-bar { + background-color: #6C6E71; + display: block; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + opacity: 0; + -webkit-border-radius: 7px; + -moz-border-radius: 7px; + border-radius: 7px; + -webkit-transition: opacity 0.2s linear; + -moz-transition: opacity 0.2s linear; + -o-transition: opacity 0.2s linear; + -ms-transition: opacity 0.2s linear; + transition: opacity 0.2s linear; } + .scrollbar-macosx:hover > .scroll-element .scroll-bar, .scrollbar-macosx > .scroll-element.scroll-draggable .scroll-bar { - -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; - filter: alpha(opacity=70); - opacity: 0.7; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; + filter: alpha(opacity=70); + opacity: 0.7; } - .scrollbar-macosx > .scroll-element.scroll-x { - bottom: 0px; - height: 0px; - left: 0; - min-width: 100%; - overflow: visible; - width: 100%; + bottom: 0px; + height: 0px; + left: 0; + min-width: 100%; + overflow: visible; + width: 100%; } .scrollbar-macosx > .scroll-element.scroll-y { - height: 100%; - min-height: 100%; - right: 0px; - top: 0; - width: 0px; + height: 100%; + min-height: 100%; + right: 0px; + top: 0; + width: 0px; } /* scrollbar height/width & offset from container borders */ -.scrollbar-macosx > .scroll-element.scroll-x .scroll-bar { height: 7px; min-width: 10px; top: -9px; } -.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { left: -9px; min-height: 10px; width: 7px; } - -.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer { left: 2px; } -.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size { left: -4px; } - -.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer { top: 2px; } -.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size { top: -4px; } - -/* update scrollbar offset if both scrolls are visible */ -.scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; } -.scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; } - - +.scrollbar-macosx > .scroll-element.scroll-x .scroll-bar { + height: 7px; + min-width: 10px; + top: -9px; +} +.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { + left: -9px; + min-height: 10px; + width: 7px; +} +.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer { + left: 2px; +} +.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size { + left: -4px; +} +.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer { + top: 2px; +} +.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size { + top: -4px; +} +/* update scrollbar offset if both scrolls are visible */ +.scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { + left: -11px; +} +.scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { + top: -11px; +} /*************** SCROLLBAR LIGHT ***************/ - .scrollbar-light > .scroll-element, .scrollbar-light > .scroll-element div { - border: none; - margin: 0; - overflow: hidden; - padding: 0; - position: absolute; - z-index: 10; + border: none; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + z-index: 10; } .scrollbar-light > .scroll-element { - background-color: #ffffff; + background-color: #ffffff; } .scrollbar-light > .scroll-element div { - display: block; - height: 100%; - left: 0; - top: 0; - width: 100%; + display: block; + height: 100%; + left: 0; + top: 0; + width: 100%; } .scrollbar-light > .scroll-element .scroll-element_outer { - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - border-radius: 10px; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; } .scrollbar-light > .scroll-element .scroll-element_size { - background: #dbdbdb; - background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+'); - background: -moz-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%); - background: -webkit-gradient(linear, left top, right top, color-stop(0%,#dbdbdb), color-stop(100%,#e8e8e8)); - background: -webkit-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%); - background: -o-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%); - background: -ms-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%); - background: linear-gradient(to right, #dbdbdb 0%,#e8e8e8 100%); - - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - border-radius: 10px; + background: #dbdbdb; + background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+"); + background: -moz-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%); + background: -webkit-gradient(linear, left top, right top, color-stop(0%, #dbdbdb), color-stop(100%, #e8e8e8)); + background: -webkit-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%); + background: -o-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%); + background: -ms-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%); + background: linear-gradient(to right, #dbdbdb 0%, #e8e8e8 100%); + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; } .scrollbar-light > .scroll-element.scroll-x { - bottom: 0; - height: 17px; - left: 0; - min-width: 100%; - width: 100%; + bottom: 0; + height: 17px; + left: 0; + min-width: 100%; + width: 100%; } .scrollbar-light > .scroll-element.scroll-y { - height: 100%; - min-height: 100%; - right: 0; - top: 0; - width: 17px; + height: 100%; + min-height: 100%; + right: 0; + top: 0; + width: 17px; } .scrollbar-light > .scroll-element .scroll-bar { - background: #fefefe; - background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+'); - background: -moz-linear-gradient(left, #fefefe 0%, #f5f5f5 100%); - background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fefefe), color-stop(100%,#f5f5f5)); - background: -webkit-linear-gradient(left, #fefefe 0%,#f5f5f5 100%); - background: -o-linear-gradient(left, #fefefe 0%,#f5f5f5 100%); - background: -ms-linear-gradient(left, #fefefe 0%,#f5f5f5 100%); - background: linear-gradient(to right, #fefefe 0%,#f5f5f5 100%); - - border: 1px solid #dbdbdb; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - border-radius: 10px; + background: #fefefe; + background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+"); + background: -moz-linear-gradient(left, #fefefe 0%, #f5f5f5 100%); + background: -webkit-gradient(linear, left top, right top, color-stop(0%, #fefefe), color-stop(100%, #f5f5f5)); + background: -webkit-linear-gradient(left, #fefefe 0%, #f5f5f5 100%); + background: -o-linear-gradient(left, #fefefe 0%, #f5f5f5 100%); + background: -ms-linear-gradient(left, #fefefe 0%, #f5f5f5 100%); + background: linear-gradient(to right, #fefefe 0%, #f5f5f5 100%); + border: 1px solid #dbdbdb; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; } /* scrollbar height/width & offset from container borders */ +.scrollbar-light > .scroll-content.scroll-scrolly_visible { + left: -17px; + margin-left: 17px; +} -.scrollbar-light > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; } -.scrollbar-light > .scroll-content.scroll-scrollx_visible { top: -17px; margin-top: 17px; } - -.scrollbar-light > .scroll-element.scroll-x .scroll-bar { height: 10px; min-width: 10px; top: 0px; } -.scrollbar-light > .scroll-element.scroll-y .scroll-bar { left: 0px; min-height: 10px; width: 10px; } - -.scrollbar-light > .scroll-element.scroll-x .scroll-element_outer { height: 12px; left: 2px; top: 2px; } -.scrollbar-light > .scroll-element.scroll-x .scroll-element_size { left: -4px; } - -.scrollbar-light > .scroll-element.scroll-y .scroll-element_outer { left: 2px; top: 2px; width: 12px; } -.scrollbar-light > .scroll-element.scroll-y .scroll-element_size { top: -4px; } - -/* update scrollbar offset if both scrolls are visible */ - -.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -19px; } -.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -19px; } +.scrollbar-light > .scroll-content.scroll-scrollx_visible { + top: -17px; + margin-top: 17px; +} -.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -19px; } -.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -19px; } +.scrollbar-light > .scroll-element.scroll-x .scroll-bar { + height: 10px; + min-width: 10px; + top: 0px; +} +.scrollbar-light > .scroll-element.scroll-y .scroll-bar { + left: 0px; + min-height: 10px; + width: 10px; +} +.scrollbar-light > .scroll-element.scroll-x .scroll-element_outer { + height: 12px; + left: 2px; + top: 2px; +} +.scrollbar-light > .scroll-element.scroll-x .scroll-element_size { + left: -4px; +} +.scrollbar-light > .scroll-element.scroll-y .scroll-element_outer { + left: 2px; + top: 2px; + width: 12px; +} +.scrollbar-light > .scroll-element.scroll-y .scroll-element_size { + top: -4px; +} +/* update scrollbar offset if both scrolls are visible */ +.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { + left: -19px; +} +.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { + top: -19px; +} +.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { + left: -19px; +} +.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { + top: -19px; +} /*************** SCROLLBAR RAIL ***************/ - .scrollbar-rail > .scroll-element, -.scrollbar-rail > .scroll-element div -{ - border: none; - margin: 0; - overflow: hidden; - padding: 0; - position: absolute; - z-index: 10; +.scrollbar-rail > .scroll-element div { + border: none; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + z-index: 10; } .scrollbar-rail > .scroll-element { - background-color: #ffffff; + background-color: #ffffff; } .scrollbar-rail > .scroll-element div { - display: block; - height: 100%; - left: 0; - top: 0; - width: 100%; + display: block; + height: 100%; + left: 0; + top: 0; + width: 100%; } .scrollbar-rail > .scroll-element .scroll-element_size { - background-color: #999; - background-color: rgba(0, 0, 0, 0.3); + background-color: #999; + background-color: rgba(0, 0, 0, 0.3); } .scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-element_size { - background-color: #666; - background-color: rgba(0, 0, 0, 0.5); + background-color: #666; + background-color: rgba(0, 0, 0, 0.5); } .scrollbar-rail > .scroll-element.scroll-x { - bottom: 0; - height: 12px; - left: 0; - min-width: 100%; - padding: 3px 0 2px; - width: 100%; + bottom: 0; + height: 12px; + left: 0; + min-width: 100%; + padding: 3px 0 2px; + width: 100%; } .scrollbar-rail > .scroll-element.scroll-y { - height: 100%; - min-height: 100%; - padding: 0 2px 0 3px; - right: 0; - top: 0; - width: 12px; + height: 100%; + min-height: 100%; + padding: 0 2px 0 3px; + right: 0; + top: 0; + width: 12px; } .scrollbar-rail > .scroll-element .scroll-bar { - background-color: #d0b9a0; - - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - - box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); + background-color: #d0b9a0; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); } .scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-bar { - box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); } /* scrollbar height/width & offset from container borders */ +.scrollbar-rail > .scroll-content.scroll-scrolly_visible { + left: -17px; + margin-left: 17px; +} -.scrollbar-rail > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; } -.scrollbar-rail > .scroll-content.scroll-scrollx_visible { margin-top: 17px; top: -17px; } - -.scrollbar-rail > .scroll-element.scroll-x .scroll-bar { height: 10px; min-width: 10px; top: 1px; } -.scrollbar-rail > .scroll-element.scroll-y .scroll-bar { left: 1px; min-height: 10px; width: 10px; } - -.scrollbar-rail > .scroll-element.scroll-x .scroll-element_outer { height: 15px; left: 5px; } -.scrollbar-rail > .scroll-element.scroll-x .scroll-element_size { height: 2px; left: -10px; top: 5px; } - -.scrollbar-rail > .scroll-element.scroll-y .scroll-element_outer { top: 5px; width: 15px; } -.scrollbar-rail > .scroll-element.scroll-y .scroll-element_size { left: 5px; top: -10px; width: 2px; } - -/* update scrollbar offset if both scrolls are visible */ - -.scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -25px; } -.scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -25px; } +.scrollbar-rail > .scroll-content.scroll-scrollx_visible { + margin-top: 17px; + top: -17px; +} -.scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -25px; } -.scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -25px; } +.scrollbar-rail > .scroll-element.scroll-x .scroll-bar { + height: 10px; + min-width: 10px; + top: 1px; +} +.scrollbar-rail > .scroll-element.scroll-y .scroll-bar { + left: 1px; + min-height: 10px; + width: 10px; +} +.scrollbar-rail > .scroll-element.scroll-x .scroll-element_outer { + height: 15px; + left: 5px; +} +.scrollbar-rail > .scroll-element.scroll-x .scroll-element_size { + height: 2px; + left: -10px; + top: 5px; +} +.scrollbar-rail > .scroll-element.scroll-y .scroll-element_outer { + top: 5px; + width: 15px; +} +.scrollbar-rail > .scroll-element.scroll-y .scroll-element_size { + left: 5px; + top: -10px; + width: 2px; +} +/* update scrollbar offset if both scrolls are visible */ +.scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { + left: -25px; +} +.scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { + top: -25px; +} +.scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { + left: -25px; +} +.scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { + top: -25px; +} /*************** SCROLLBAR DYNAMIC ***************/ - .scrollbar-dynamic > .scroll-element, -.scrollbar-dynamic > .scroll-element div -{ - background: none; - border: none; - margin: 0; - padding: 0; - position: absolute; - z-index: 10; +.scrollbar-dynamic > .scroll-element div { + background: none; + border: none; + margin: 0; + padding: 0; + position: absolute; + z-index: 10; } .scrollbar-dynamic > .scroll-element div { - display: block; - height: 100%; - left: 0; - top: 0; - width: 100%; + display: block; + height: 100%; + left: 0; + top: 0; + width: 100%; } .scrollbar-dynamic > .scroll-element.scroll-x { - bottom: 2px; - height: 7px; - left: 0; - min-width: 100%; - width: 100%; + bottom: 2px; + height: 7px; + left: 0; + min-width: 100%; + width: 100%; } .scrollbar-dynamic > .scroll-element.scroll-y { - height: 100%; - min-height: 100%; - right: 2px; - top: 0; - width: 7px; + height: 100%; + min-height: 100%; + right: 2px; + top: 0; + width: 7px; } .scrollbar-dynamic > .scroll-element .scroll-element_outer { - opacity: 0.3; - - -webkit-border-radius: 12px; - -moz-border-radius: 12px; - border-radius: 12px; + opacity: 0.3; + -webkit-border-radius: 12px; + -moz-border-radius: 12px; + border-radius: 12px; } -.scrollbar-dynamic > .scroll-element .scroll-element_size { - background-color: #cccccc; - opacity: 0; - -webkit-border-radius: 12px; - -moz-border-radius: 12px; - border-radius: 12px; - - -webkit-transition: opacity 0.2s; - -moz-transition: opacity 0.2s; - -o-transition: opacity 0.2s; - -ms-transition: opacity 0.2s; - transition: opacity 0.2s; +.scrollbar-dynamic > .scroll-element .scroll-element_size { + background-color: #cccccc; + opacity: 0; + -webkit-border-radius: 12px; + -moz-border-radius: 12px; + border-radius: 12px; + -webkit-transition: opacity 0.2s; + -moz-transition: opacity 0.2s; + -o-transition: opacity 0.2s; + -ms-transition: opacity 0.2s; + transition: opacity 0.2s; } .scrollbar-dynamic > .scroll-element .scroll-bar { - background-color: #6c6e71; - - -webkit-border-radius: 7px; - -moz-border-radius: 7px; - border-radius: 7px; + background-color: #6c6e71; + -webkit-border-radius: 7px; + -moz-border-radius: 7px; + border-radius: 7px; } /* scrollbar height/width & offset from container borders */ - .scrollbar-dynamic > .scroll-element.scroll-x .scroll-bar { - bottom: 0; - height: 7px; - min-width: 24px; - top: auto; + bottom: 0; + height: 7px; + min-width: 24px; + top: auto; } + .scrollbar-dynamic > .scroll-element.scroll-y .scroll-bar { - left: auto; - min-height: 24px; - right: 0; - width: 7px; + left: auto; + min-height: 24px; + right: 0; + width: 7px; } .scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_outer { - bottom: 0; - top: auto; - left: 2px; - - -webkit-transition: height 0.2s; - -moz-transition: height 0.2s; - -o-transition: height 0.2s; - -ms-transition: height 0.2s; - transition: height 0.2s; + bottom: 0; + top: auto; + left: 2px; + -webkit-transition: height 0.2s; + -moz-transition: height 0.2s; + -o-transition: height 0.2s; + -ms-transition: height 0.2s; + transition: height 0.2s; } .scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_outer { - left: auto; - right: 0; - top: 2px; - - -webkit-transition: width 0.2s; - -moz-transition: width 0.2s; - -o-transition: width 0.2s; - -ms-transition: width 0.2s; - transition: width 0.2s; + left: auto; + right: 0; + top: 2px; + -webkit-transition: width 0.2s; + -moz-transition: width 0.2s; + -o-transition: width 0.2s; + -ms-transition: width 0.2s; + transition: width 0.2s; } -.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_size { left: -4px; } -.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_size { top: -4px; } +.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_size { + left: -4px; +} +.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_size { + top: -4px; +} /* update scrollbar offset if both scrolls are visible */ +.scrollbar-dynamic > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { + left: -11px; +} -.scrollbar-dynamic > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; } -.scrollbar-dynamic > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; } - +.scrollbar-dynamic > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { + top: -11px; +} /* hover & drag */ - .scrollbar-dynamic > .scroll-element:hover .scroll-element_outer, .scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer { - overflow: hidden; - - -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; - filter: alpha(opacity=70); - opacity: 0.7; + overflow: hidden; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; + filter: alpha(opacity=70); + opacity: 0.7; } + .scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-element_size, .scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-element_size { - opacity: 1; + opacity: 1; } + .scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-bar, .scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-bar { - height: 100%; - width: 100%; - - -webkit-border-radius: 12px; - -moz-border-radius: 12px; - border-radius: 12px; + height: 100%; + width: 100%; + -webkit-border-radius: 12px; + -moz-border-radius: 12px; + border-radius: 12px; } .scrollbar-dynamic > .scroll-element.scroll-x:hover .scroll-element_outer, .scrollbar-dynamic > .scroll-element.scroll-x.scroll-draggable .scroll-element_outer { - height: 20px; - min-height: 7px; + height: 20px; + min-height: 7px; } + .scrollbar-dynamic > .scroll-element.scroll-y:hover .scroll-element_outer, .scrollbar-dynamic > .scroll-element.scroll-y.scroll-draggable .scroll-element_outer { - min-width: 7px; - width: 20px; + min-width: 7px; + width: 20px; } - - - - - - - - - /*************** SCROLLBAR GOOGLE CHROME ***************/ - .scrollbar-chrome > .scroll-element, -.scrollbar-chrome > .scroll-element div -{ - border: none; - margin: 0; - overflow: hidden; - padding: 0; - position: absolute; - z-index: 10; +.scrollbar-chrome > .scroll-element div { + border: none; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + z-index: 10; } .scrollbar-chrome > .scroll-element { - background-color: #ffffff; + background-color: #ffffff; } .scrollbar-chrome > .scroll-element div { - display: block; - height: 100%; - left: 0; - top: 0; - width: 100%; + display: block; + height: 100%; + left: 0; + top: 0; + width: 100%; } -.scrollbar-chrome > .scroll-element .scroll-element_outer {} - .scrollbar-chrome > .scroll-element .scroll-element_track { - background: #f1f1f1; - border: 1px solid #dbdbdb; + background: #f1f1f1; + border: 1px solid #dbdbdb; } .scrollbar-chrome > .scroll-element.scroll-x { - bottom: 0; - height: 16px; - left: 0; - min-width: 100%; - width: 100%; + bottom: 0; + height: 16px; + left: 0; + min-width: 100%; + width: 100%; } .scrollbar-chrome > .scroll-element.scroll-y { - height: 100%; - min-height: 100%; - right: 0; - top: 0; - width: 16px; + height: 100%; + min-height: 100%; + right: 0; + top: 0; + width: 16px; } .scrollbar-chrome > .scroll-element .scroll-bar { - background-color: #d9d9d9; - border: 1px solid #bdbdbd; - cursor: default; - - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; + background-color: #d9d9d9; + border: 1px solid #bdbdbd; + cursor: default; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; } .scrollbar-chrome > .scroll-element .scroll-bar:hover { - background-color: #c2c2c2; - border-color: #a9a9a9; + background-color: #c2c2c2; + border-color: #a9a9a9; } .scrollbar-chrome > .scroll-element.scroll-draggable .scroll-bar { - background-color: #919191; - border-color: #7e7e7e; + background-color: #919191; + border-color: #7e7e7e; } /* scrollbar height/width & offset from container borders */ +.scrollbar-chrome > .scroll-content.scroll-scrolly_visible { + left: -16px; + margin-left: 16px; +} -.scrollbar-chrome > .scroll-content.scroll-scrolly_visible { left: -16px; margin-left: 16px; } -.scrollbar-chrome > .scroll-content.scroll-scrollx_visible { top: -16px; margin-top: 16px; } - -.scrollbar-chrome > .scroll-element.scroll-x .scroll-bar { height: 8px; min-width: 10px; top: 3px; } -.scrollbar-chrome > .scroll-element.scroll-y .scroll-bar { left: 3px; min-height: 10px; width: 8px; } +.scrollbar-chrome > .scroll-content.scroll-scrollx_visible { + top: -16px; + margin-top: 16px; +} -.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_outer { border-left: 1px solid #dbdbdb; } -.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_track { height: 14px; left: -3px; } -.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_size { height: 14px; left: -4px; } +.scrollbar-chrome > .scroll-element.scroll-x .scroll-bar { + height: 8px; + min-width: 10px; + top: 3px; +} -.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_outer { border-top: 1px solid #dbdbdb; } -.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_track { top: -3px; width: 14px; } -.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_size { top: -4px; width: 14px; } +.scrollbar-chrome > .scroll-element.scroll-y .scroll-bar { + left: 3px; + min-height: 10px; + width: 8px; +} -/* update scrollbar offset if both scrolls are visible */ +.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_outer { + border-left: 1px solid #dbdbdb; +} -.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -19px; } -.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -19px; } +.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_track { + height: 14px; + left: -3px; +} -.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -19px; } -.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -19px; } +.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_size { + height: 14px; + left: -4px; +} +.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_outer { + border-top: 1px solid #dbdbdb; +} +.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_track { + top: -3px; + width: 14px; +} +.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_size { + top: -4px; + width: 14px; +} +/* update scrollbar offset if both scrolls are visible */ +.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { + left: -19px; +} +.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { + top: -19px; +} +.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { + left: -19px; +} +.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { + top: -19px; +} diff --git a/jquery.scrollbar.js b/jquery.scrollbar.js index b384169..c3b8a75 100644 --- a/jquery.scrollbar.js +++ b/jquery.scrollbar.js @@ -7,32 +7,40 @@ * If you found bug, please contact me via email <13real008@gmail.com> * * @author Yuriy Khabarov aka Gromo - * @version 0.3.0 beta + * @version 0.2.11 * @url https://github.com/gromo/jquery.scrollbar/ * */ ; (function (root, factory) { + 'use strict'; if (typeof define === 'function' && define.amd) { define(['jquery'], factory); + } else if (typeof exports !== 'undefined') { + module.exports = factory(require('jquery')); } else { - factory(root.jQuery); + factory(jQuery); } }(this, function ($) { 'use strict'; + // init flags & variables + var debug = false; + var browser = { data: { index: 0, - name: 'scrollbar', - updateTimer: 0 + name: 'scrollbar' }, - isWebkit: /webkit/i.test(navigator.userAgent) && !/edge\/\d+/i.test(navigator.userAgent), - isMac: /mac/i.test(navigator.platform), - isMobile: /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent), - isOverlay: null, + firefox: /firefox/i.test(navigator.userAgent), + macosx: /mac/i.test(navigator.platform), + msedge: /edge\/\d+/i.test(navigator.userAgent), + msie: /(msie|trident)/i.test(navigator.userAgent), + mobile: /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent), + overlay: null, scroll: null, - scrolls: [] + scrolls: [], + webkit: /webkit/i.test(navigator.userAgent) && !/edge\/\d+/i.test(navigator.userAgent) }; browser.scrolls.add = function (instance) { @@ -44,32 +52,27 @@ } return this; }; - browser.scrolls.update = function(force){ - for (var i = 0; i < browser.scrolls.length; i++) { - browser.scrolls[i].update(force); - } - clearTimeout(browser.data.updateTimer); - browser.data.updateTimer = setTimeout(browser.scrolls.update, 300); - }; - var defaultOptions = { - autoScrollSize: true, // automatically calculate scrollsize - autoUpdate: true, // update scrollbar if content/container size changed - debug: false, // debug mode + var defaults = { + autoScrollSize: true, // automatically calculate scrollsize + autoUpdate: true, // update scrollbar if content/container size changed + debug: false, // debug mode disableBodyScroll: false, // disable body scroll if mouse over container - duration: 200, // scroll animate duration in ms - ignoreMobile: false, // ignore mobile devices - ignoreOverlay: false, // ignore browsers with overlay scrollbars (mobile, MacOS) - scrollStep: 30, // scroll step for scrollbar arrows - showArrows: false, // add class to show arrows - stepScrolling: true, // when scrolling to scrollbar mousedown position - - scrollx: null, // horizontal scroll element - scrolly: null, // vertical scroll element - - onDestroy: null, // callback function on destroy, - onInit: null, // callback function on first initialization - onScroll: null, // callback function on content scrolling + duration: 200, // scroll animate duration in ms + ignoreMobile: false, // ignore mobile devices + ignoreOverlay: false, // ignore browsers with overlay scrollbars (mobile, MacOS) + isRtl: false, // is RTL + scrollStep: 30, // scroll step for scrollbar arrows + showArrows: false, // add class to show arrows + stepScrolling: true, // when scrolling to scrollbar mousedown position + + scrollx: null, // horizontal scroll element + scrolly: null, // vertical scroll element + + onDestroy: null, // callback function on destroy, + onFallback: null, // callback function if scrollbar is not initialized + onInit: null, // callback function on first initialization + onScroll: null, // callback function on content scrolling onUpdate: null // callback function on init/resize (before scrollbar size calculation) }; @@ -77,16 +80,26 @@ var BaseScrollbar = function (container) { if (!browser.scroll) { - browser.scroll = this._getBrowserScrollSize(); - browser.isOverlay = (browser.scroll.height === 0 && browser.scroll.width === 0); - browser.scrolls.update(); // run interval check + browser.overlay = isScrollOverlaysContent(); + browser.scroll = getBrowserScrollSize(); + updateScrollbars(); + + $(window).resize(function () { + var forceUpdate = false; + if (browser.scroll && (browser.scroll.height || browser.scroll.width)) { + var scroll = getBrowserScrollSize(); + if (scroll.height !== browser.scroll.height || scroll.width !== browser.scroll.width) { + browser.scroll = scroll; + forceUpdate = true; // handle page zoom + } + } + updateScrollbars(forceUpdate); + }); } this.container = container; - this.dimensions = {}; - this.isRtl = container.css('direction') === 'rtl'; this.namespace = '.scrollbar_' + browser.data.index++; - this.options = $.extend({}, defaultOptions, window.jQueryScrollbarOptions || {}); + this.options = $.extend({}, defaults, window.jQueryScrollbarOptions || {}); this.scrollTo = null; this.scrollx = {}; this.scrolly = {}; @@ -96,22 +109,18 @@ }; BaseScrollbar.prototype = { - destroy: function () { if (!this.wrapper) { return; } - // unregister scroll instance this.container.removeData(browser.data.name); browser.scrolls.remove(this); // init variables - var currentScroll = { - "left": this.container.scrollLeft(), - "top": this.container.scrollTop() - }; + var scrollLeft = this.container.scrollLeft(); + var scrollTop = this.container.scrollTop(); this.container.insertBefore(this.wrapper).css({ "height": "", @@ -120,17 +129,17 @@ }) .removeClass('scroll-content scroll-scrollx_visible scroll-scrolly_visible') .off(this.namespace) - .scrollLeft(currentScroll.left) - .scrollTop(currentScroll.top); + .scrollLeft(scrollLeft) + .scrollTop(scrollTop); - this.scrollx.scroll.removeClass('scroll-scrollx_visible').find('div').andSelf().off(this.namespace); - this.scrolly.scroll.removeClass('scroll-scrolly_visible').find('div').andSelf().off(this.namespace); + this.scrollx.scroll.removeClass('scroll-scrollx_visible').find('div').addBack().off(this.namespace); + this.scrolly.scroll.removeClass('scroll-scrolly_visible').find('div').addBack().off(this.namespace); this.wrapper.remove(); $(document).add('body').off(this.namespace); - if ($.isFunction(this.options.onDestroy)){ + if ($.isFunction(this.options.onDestroy)) { this.options.onDestroy.apply(this, [this.container]); } }, @@ -143,49 +152,80 @@ namespace = this.namespace, o = $.extend(this.options, options || {}), s = {x: this.scrollx, y: this.scrolly}, - w = this.wrapper; + w = this.wrapper, + cssOptions = {}; var initScroll = { - "scrollLeft": c.scrollLeft(), - "scrollTop": c.scrollTop() + scrollLeft: c.scrollLeft(), + scrollTop: c.scrollTop() }; // do not init if in ignorable browser - if ((browser.isMobile && o.ignoreMobile) - || (browser.isOverlay && o.ignoreOverlay) - || (browser.isMac && !browser.isWebkit) // still required to ignore nonWebKit browsers on Mac + if ((browser.mobile && o.ignoreMobile) + || (browser.overlay && o.ignoreOverlay) + || (browser.macosx && !browser.webkit) // still required to ignore nonWebKit browsers on Mac ) { + if ($.isFunction(o.onFallback)) { + o.onFallback.apply(this, [c]); + } return false; } // init scroll container if (!w) { this.wrapper = w = $('
    ').addClass('scroll-wrapper').addClass(c.attr('class')) - .css('position', c.css('position') == 'absolute' ? 'absolute' : 'relative') + .css('position', c.css('position') === 'absolute' ? 'absolute' : 'relative') .insertBefore(c).append(c); + if (o.isRtl) { + w.addClass('scroll--rtl'); + } + if (c.is('textarea')) { this.containerWrapper = cw = $('
    ').insertBefore(c).append(c); w.addClass('scroll-textarea'); } - cw.addClass('scroll-content'); - - c.on('scroll' + namespace, $.proxy(function () { - if ($.isFunction(this.options.onScroll)) { - this.options.onScroll.call(this, { - scroll: this.container.scrollTop(), - size: this.dimensions.scrollHeight, - visible: this.dimensions.visibleHeight + cssOptions = { + "height": "auto", + "margin-bottom": browser.scroll.height * -1 + 'px', + "max-height": "" + }; + cssOptions[o.isRtl ? 'margin-left' : 'margin-right'] = browser.scroll.width * -1 + 'px'; + + cw.addClass('scroll-content').css(cssOptions); + + c.on('scroll' + namespace, function (event) { + var scrollLeft = c.scrollLeft(); + var scrollTop = c.scrollTop(); + if (o.isRtl) { + // webkit 0:100 + // ie/edge 100:0 + // firefox -100:0 + switch (true) { + case browser.firefox: + scrollLeft = Math.abs(scrollLeft); + case browser.msedge || browser.msie: + scrollLeft = c[0].scrollWidth - c[0].clientWidth - scrollLeft; + break; + } + } + if ($.isFunction(o.onScroll)) { + o.onScroll.call(S, { + maxScroll: s.y.maxScrollOffset, + scroll: scrollTop, + size: s.y.size, + visible: s.y.visible }, { - scroll: this.container.scrollLeft(), - size: this.dimensions.scrollWidth, - visible: this.dimensions.visibleWidth + maxScroll: s.x.maxScrollOffset, + scroll: scrollLeft, + size: s.x.size, + visible: s.x.visible }); } - this.scrollx.isVisible && this.scrollx.scroll.bar.css('left', c.scrollLeft() * this.scrollx.kx + 'px'); - this.scrolly.isVisible && this.scrolly.scroll.bar.css('top', c.scrollTop() * this.scrolly.kx + 'px'); - }, this)); + s.x.isVisible && s.x.scroll.bar.css('left', scrollLeft * s.x.kx + 'px'); + s.y.isVisible && s.y.scroll.bar.css('top', scrollTop * s.y.kx + 'px'); + }); /* prevent native scrollbars to be visible on #anchor click */ w.on('scroll' + namespace, function () { @@ -201,7 +241,7 @@ w.on('MozMousePixelScroll' + namespace, handleMouseScroll); w.on('mousewheel' + namespace, handleMouseScroll); - if (browser.isMobile) { + if (browser.mobile) { w.on('touchstart' + namespace, function (event) { var touch = event.originalEvent.touches && event.originalEvent.touches[0] || event; var originalTouch = { @@ -209,8 +249,8 @@ pageY: touch.pageY }; var originalScroll = { - "left": c.scrollLeft(), - "top": c.scrollTop() + left: c.scrollLeft(), + top: c.scrollTop() }; $(document).on('touchmove' + namespace, function (event) { var touch = event.originalEvent.targetTouches && event.originalEvent.targetTouches[0] || event; @@ -224,18 +264,19 @@ }); } } - if ($.isFunction(o.onInit)){ + if ($.isFunction(o.onInit)) { o.onInit.apply(this, [c]); } + } else { + cssOptions = { + "height": "auto", + "margin-bottom": browser.scroll.height * -1 + 'px', + "max-height": "" + }; + cssOptions[o.isRtl ? 'margin-left' : 'margin-right'] = browser.scroll.width * -1 + 'px'; + cw.css(cssOptions); } - cw.css({ - "height": "auto", - "margin-bottom": browser.scroll.height * -1 + 'px', - "margin-right": browser.scroll.width * -1 + 'px', - "max-height": "" - }); - // init scrollbars & recalculate sizes $.each(s, function (d, scrollx) { @@ -260,7 +301,7 @@ scrollx.scroll = S._getScroll(o['scroll' + d]).addClass('scroll-' + d); - if(o.showArrows){ + if (o.showArrows) { scrollx.scroll.addClass('scroll-element_arrows_visible'); } @@ -277,6 +318,15 @@ var delta = event.originalEvent.wheelDelta * -1 || event.originalEvent.detail; var maxScrollValue = scrollx.size - scrollx.visible - scrollx.offset; + // fix new mozilla + if (!delta) { + if (d === 'x' && !!event.originalEvent.deltaX) { + delta = event.originalEvent.deltaX * 40; + } else if (d === 'y' && !!event.originalEvent.deltaY) { + delta = event.originalEvent.deltaY * 40; + } + } + if ((delta > 0 && scrollToValue < maxScrollValue) || (delta < 0 && scrollToValue > 0)) { scrollToValue = scrollToValue + delta; if (scrollToValue < 0) @@ -317,10 +367,10 @@ scrollForward = 1; var data = { - "eventOffset": event[(d === 'x') ? 'pageX' : 'pageY'], - "maxScrollValue": scrollx.size - scrollx.visible - scrollx.offset, - "scrollbarOffset": scrollx.scroll.bar.offset()[(d === 'x') ? 'left' : 'top'], - "scrollbarSize": scrollx.scroll.bar[(d === 'x') ? 'outerWidth' : 'outerHeight']() + eventOffset: event[(d === 'x') ? 'pageX' : 'pageY'], + maxScrollValue: scrollx.size - scrollx.visible - scrollx.offset, + scrollbarOffset: scrollx.scroll.bar.offset()[(d === 'x') ? 'left' : 'top'], + scrollbarSize: scrollx.scroll.bar[(d === 'x') ? 'outerWidth' : 'outerHeight']() }; var timeout = 0, timer = 0; @@ -328,9 +378,20 @@ scrollForward = $(this).hasClass("scroll-arrow_more") ? 1 : -1; scrollStep = o.scrollStep * scrollForward; scrollToValue = scrollForward > 0 ? data.maxScrollValue : 0; + if (o.isRtl) { + switch(true){ + case browser.firefox: + scrollToValue = scrollForward > 0 ? 0: data.maxScrollValue * -1; + break; + case browser.msie || browser.msedge: + break; + } + } } else { scrollForward = (data.eventOffset > (data.scrollbarOffset + data.scrollbarSize) ? 1 : (data.eventOffset < data.scrollbarOffset ? -1 : 0)); + if(d === 'x' && o.isRtl && (browser.msie || browser.msedge)) + scrollForward = scrollForward * -1; scrollStep = Math.round(scrollx.visible * 0.75) * scrollForward; scrollToValue = (data.eventOffset - data.scrollbarOffset - (o.stepScrolling ? (scrollForward == 1 ? data.scrollbarSize : 0) @@ -377,6 +438,8 @@ $(document).on('mousemove' + namespace, function (event) { var diff = parseInt((event[(d === 'x') ? 'pageX' : 'pageY'] - eventPosition) / scrollx.kx, 10); + if (d === 'x' && o.isRtl && (browser.msie || browser.msedge)) + diff = diff * -1; c[scrollOffset](initOffset + diff); }); @@ -389,66 +452,61 @@ }); // remove classes & reset applied styles - cw.add(this.scrollx.scroll).add(this.scrolly.scroll).removeClass('scroll-scrollx_visible scroll-scrolly_visible'); + $.each(s, function (d, scrollx) { + var scrollClass = 'scroll-scroll' + d + '_visible'; + var scrolly = (d == "x") ? s.y : s.x; + + scrollx.scroll.removeClass(scrollClass); + scrolly.scroll.removeClass(scrollClass); + cw.removeClass(scrollClass); + }); // calculate init sizes - this.dimensions = this._getDimensions(); + $.each(s, function (d, scrollx) { + $.extend(scrollx, (d == "x") ? { + offset: parseInt(c.css('left'), 10) || 0, + size: c.prop('scrollWidth'), + visible: w.width() + } : { + offset: parseInt(c.css('top'), 10) || 0, + size: c.prop('scrollHeight'), + visible: w.height() + }); + }); // update scrollbar visibility/dimensions this._updateScroll('x', this.scrollx); this._updateScroll('y', this.scrolly); - if ($.isFunction(o.onUpdate)){ + if ($.isFunction(o.onUpdate)) { o.onUpdate.apply(this, [c]); } // calculate scroll size - this._updateScrollSize('x', this.scrollx); - this._updateScrollSize('y', this.scrolly); + $.each(s, function (d, scrollx) { - c.scrollLeft(initScroll.scrollLeft).scrollTop(initScroll.scrollTop).trigger('scroll'); - }, + var cssOffset = (d === 'x') ? 'left' : 'top'; + var cssFullSize = (d === 'x') ? 'outerWidth' : 'outerHeight'; + var cssSize = (d === 'x') ? 'width' : 'height'; + var offset = parseInt(c.css(cssOffset), 10) || 0; - update: function(force){ - if (force || (this.options.autoUpdate && this.wrapper && this.wrapper.is(':visible') && this._isChanged())) { - this.init(); - } - }, + var AreaSize = scrollx.size; + var AreaVisible = scrollx.visible + offset; - /** - * Calculate browser native scrollbar height/width - * - * @returns {Object} {"height", "width"} - */ - _getBrowserScrollSize: function () { - if (!browser.data.outer) { - browser.data.outer = $('
    ').prependTo('body') - .attr('style', 'border:none;margin:0;padding:0;height:100px;width:100px;position:absolute;overflow:scroll;left:-1000px;top:-1000px;'); - browser.data.inner = $('
    ').appendTo(browser.data.outer) - .attr('style', 'border:none;margin:0;padding:0;height:100%;width:100%;position:absolute;'); - } - return { - height: browser.data.outer.height() - browser.data.inner.height(), - width: browser.data.outer.width() - browser.data.inner.width() - }; - }, + var scrollSize = scrollx.scroll.size[cssFullSize]() + (parseInt(scrollx.scroll.size.css(cssOffset), 10) || 0); - /** - * Get element's dimensions: scrollHeight, scrollWidth, visibleHeight, visibleWidth - * - * @returns {Object} element dimensions - */ - _getDimensions: function () { - var element = this.container, - wrapper = this.wrapper; - return { - scrollHeight: element.prop('scrollHeight'), - scrollWidth: element.prop('scrollWidth'), - visibleHeight: wrapper.height() + (parseInt(element.css('top'), 10) || 0), - visibleWidth: wrapper.width() + (parseInt(element.css('left'), 10) || 0) - }; - }, + if (o.autoScrollSize) { + scrollx.scrollbarSize = parseInt(scrollSize * AreaVisible / AreaSize, 10); + scrollx.scroll.bar.css(cssSize, scrollx.scrollbarSize + 'px'); + } + scrollx.scrollbarSize = scrollx.scroll.bar[cssFullSize](); + scrollx.kx = ((scrollSize - scrollx.scrollbarSize) / (AreaSize - AreaVisible)) || 1; + scrollx.maxScrollOffset = AreaSize - AreaVisible; + }); + + c.scrollLeft(initScroll.scrollLeft).scrollTop(initScroll.scrollTop).trigger('scroll'); + }, /** * Get scrollx/scrolly object * @@ -507,8 +565,7 @@ }); return scroll; }, - - _handleMouseDown: function(callback, event) { + _handleMouseDown: function (callback, event) { var namespace = this.namespace; @@ -532,48 +589,31 @@ event && event.preventDefault(); return false; }, - - /** - * Check if element dimensions were changed - * + update current dimensions - * - * @returns {Boolean} is changed - */ - _isChanged: function () { - var isChanged = false, - newDimensions = this._getDimensions(), - oldDimensions = this.dimensions; - $.each(newDimensions, function (key, newValue) { - if (oldDimensions[key] !== newValue) { - isChanged = true; - return false; - } - }); - this.dimensions = newDimensions; - - if (isChanged && this.options.debug) { - window.console && console.log(this.dimensions); - } - - return isChanged; - }, - _updateScroll: function (d, scrollx) { var container = this.container, containerWrapper = this.containerWrapper || container, scrollClass = 'scroll-scroll' + d + '_visible', scrolly = (d === 'x') ? this.scrolly : this.scrollx, + offset = parseInt(this.container.css((d === 'x') ? 'left' : 'top'), 10) || 0, wrapper = this.wrapper; - var AreaSize = this.dimensions[d === 'x' ? 'scrollWidth' : 'scrollHeight'], - AreaVisible = this.dimensions[d === 'x' ? 'visibleWidth' : 'visibleHeight']; + var AreaSize = scrollx.size; + var AreaVisible = scrollx.visible + offset; scrollx.isVisible = (AreaSize - AreaVisible) > 1; // bug in IE9/11 with 1px diff - containerWrapper.add(scrollx.scroll).add(scrolly.scroll)[scrollx.isVisible ? 'addClass' : 'removeClass'](scrollClass); + if (scrollx.isVisible) { + scrollx.scroll.addClass(scrollClass); + scrolly.scroll.addClass(scrollClass); + containerWrapper.addClass(scrollClass); + } else { + scrollx.scroll.removeClass(scrollClass); + scrolly.scroll.removeClass(scrollClass); + containerWrapper.removeClass(scrollClass); + } if (d === 'y') { - if(container.is('textarea') || AreaSize < AreaVisible){ + if (container.is('textarea') || AreaSize < AreaVisible) { containerWrapper.css({ "height": (AreaVisible + browser.scroll.height) + 'px', "max-height": "none" @@ -586,94 +626,34 @@ } } - if(this._isChanged()){ + if (scrollx.size != container.prop('scrollWidth') + || scrolly.size != container.prop('scrollHeight') + || scrollx.visible != wrapper.width() + || scrolly.visible != wrapper.height() + || scrollx.offset != (parseInt(container.css('left'), 10) || 0) + || scrolly.offset != (parseInt(container.css('top'), 10) || 0) + ) { + $.extend(this.scrollx, { + offset: parseInt(container.css('left'), 10) || 0, + size: container.prop('scrollWidth'), + visible: wrapper.width() + }); + $.extend(this.scrolly, { + offset: parseInt(container.css('top'), 10) || 0, + size: this.container.prop('scrollHeight'), + visible: wrapper.height() + }); this._updateScroll(d === 'x' ? 'y' : 'x', scrolly); } - }, - - _updateScrollSize: function (d, scrollx) { - - var cssOffset = (d === 'x') ? 'left' : 'top', - cssFullSize = (d === 'x') ? 'outerWidth' : 'outerHeight', - cssSize = (d === 'x') ? 'width' : 'height'; - - var AreaSize = this.dimensions[d === 'x' ? 'scrollWidth' : 'scrollHeight'], - AreaVisible = this.dimensions[d === 'x' ? 'visibleWidth' : 'visibleHeight']; - - var scrollSize = scrollx.scroll.size[cssFullSize]() + (parseInt(scrollx.scroll.size.css(cssOffset), 10) || 0); - - if (this.options.autoScrollSize) { - scrollx.scrollbarSize = parseInt(scrollSize * AreaVisible / AreaSize, 10); - scrollx.scroll.bar.css(cssSize, scrollx.scrollbarSize + 'px'); - } - - scrollx.scrollbarSize = scrollx.scroll.bar[cssFullSize](); - scrollx.kx = ((scrollSize - scrollx.scrollbarSize) / (AreaSize - AreaVisible)) || 1; } }; - var BaseVisibleScrollbar = function(){ - - // handle page zoom & scrollbars resizing - if(!browser.scroll){ - $(window).resize($.proxy(function () { - var forceUpdate = false; - if (browser.scroll && !browser.isOverlay) { - var scroll = this._getBrowserScrollSize(); - if (scroll.height !== browser.scroll.height || scroll.width !== browser.scroll.width) { - browser.scroll = scroll; - forceUpdate = true; // handle page zoom - } - } - browser.scrolls.update(forceUpdate); - }, this)); - } - - BaseScrollbar.apply(this, arguments); - }; - - BaseVisibleScrollbar.prototype = $.extend({}, BaseScrollbar.prototype, { - - }); - - var FirefoxScrollbar = function () { - BaseVisibleScrollbar.apply(this, arguments); - }; - - FirefoxScrollbar.prototype = $.extend({}, BaseVisibleScrollbar.prototype, { - }); - - var MsieScrollbar = function () { - BaseVisibleScrollbar.apply(this, arguments); - }; - - MsieScrollbar.prototype = $.extend({}, BaseVisibleScrollbar.prototype, { - }); - - var WebkitScrollbar = function () { - BaseScrollbar.apply(this, arguments); - }; - - WebkitScrollbar.prototype = $.extend({}, BaseScrollbar.prototype, { - }); - - var CustomScrollbar = BaseVisibleScrollbar; - switch (true) { - case browser.isFF: - CustomScrollbar = FirefoxScrollbar; - break; - case browser.isIE: - CustomScrollbar = MsieScrollbar; - break; - case browser.isWebkit: - CustomScrollbar = WebkitScrollbar; - break; - } + var CustomScrollbar = BaseScrollbar; /* * Extend jQuery as plugin * - * @param {Mixed} command to execute or options to init + * @param {Mixed} command to execute * @param {Mixed} arguments as Array * @return {jQuery} */ @@ -706,10 +686,103 @@ /** * Connect default options to global object */ - $.fn.scrollbar.options = defaultOptions; + $.fn.scrollbar.options = defaults; + + + /** + * Check if scroll content/container size is changed + */ + var updateScrollbars = (function () { + var timer = 0, + timerCounter = 0; + + return function (force) { + var i, container, options, scroll, wrapper, scrollx, scrolly; + for (i = 0; i < browser.scrolls.length; i++) { + scroll = browser.scrolls[i]; + container = scroll.container; + options = scroll.options; + wrapper = scroll.wrapper; + scrollx = scroll.scrollx; + scrolly = scroll.scrolly; + if (force || (options.autoUpdate && wrapper && wrapper.is(':visible') && + (container.prop('scrollWidth') != scrollx.size || container.prop('scrollHeight') != scrolly.size || wrapper.width() != scrollx.visible || wrapper.height() != scrolly.visible))) { + scroll.init(); + + if (options.debug) { + window.console && console.log({ + scrollHeight: container.prop('scrollHeight') + ':' + scroll.scrolly.size, + scrollWidth: container.prop('scrollWidth') + ':' + scroll.scrollx.size, + visibleHeight: wrapper.height() + ':' + scroll.scrolly.visible, + visibleWidth: wrapper.width() + ':' + scroll.scrollx.visible + }, true); + timerCounter++; + } + } + } + if (debug && timerCounter > 10) { + window.console && console.log('Scroll updates exceed 10'); + updateScrollbars = function () {}; + } else { + clearTimeout(timer); + timer = setTimeout(updateScrollbars, 300); + } + }; + })(); /* ADDITIONAL FUNCTIONS */ + /** + * Get native browser scrollbar size (height/width) + * + * @param {Boolean} actual size or CSS size, default - CSS size + * @returns {Object} with height, width + */ + function getBrowserScrollSize(actualSize) { + + if (browser.webkit && !actualSize) { + return { + height: 0, + width: 0 + }; + } + + if (!browser.data.outer) { + var css = { + "border": "none", + "box-sizing": "content-box", + "height": "200px", + "margin": "0", + "padding": "0", + "width": "200px" + }; + browser.data.inner = $("
    ").css($.extend({}, css)); + browser.data.outer = $("
    ").css($.extend({ + "left": "-1000px", + "overflow": "scroll", + "position": "absolute", + "top": "-1000px" + }, css)).append(browser.data.inner).appendTo("body"); + } + + browser.data.outer.scrollLeft(1000).scrollTop(1000); + + return { + height: Math.ceil((browser.data.outer.offset().top - browser.data.inner.offset().top) || 0), + width: Math.ceil((browser.data.outer.offset().left - browser.data.inner.offset().left) || 0) + }; + } + + /** + * Check if native browser scrollbars overlay content + * + * @returns {Boolean} + */ + function isScrollOverlaysContent() { + var scrollSize = getBrowserScrollSize(true); + return !(scrollSize.height || scrollSize.width); + } + function isVerticalScroll(event) { var e = event.originalEvent; if (e.axis && e.axis === e.HORIZONTAL_AXIS) @@ -729,6 +802,7 @@ (function (angular) { angular.module('jQueryScrollbar', []) .provider('jQueryScrollbar', function () { + var defaultOptions = defaults; return { setOptions: function (options) { angular.extend(defaultOptions, options); @@ -740,19 +814,19 @@ } }; }) - .directive('jqueryScrollbar', function (jQueryScrollbar, $parse) { - return { - "restrict": "AC", - "link": function (scope, element, attrs) { - var model = $parse(attrs.jqueryScrollbar), - options = model(scope); - element.scrollbar(options || jQueryScrollbar.options) - .on('$destroy', function () { - element.scrollbar('destroy'); - }); - } - }; - }); + .directive('jqueryScrollbar', ['jQueryScrollbar', '$parse', function (jQueryScrollbar, $parse) { + return { + restrict: "AC", + link: function (scope, element, attrs) { + var model = $parse(attrs.jqueryScrollbar), + options = model(scope); + element.scrollbar(options || jQueryScrollbar.options) + .on('$destroy', function () { + element.scrollbar('destroy'); + }); + } + }; + }]); })(window.angular); } -})); \ No newline at end of file +})); diff --git a/jquery.scrollbar.min.js b/jquery.scrollbar.min.js index 3adce6e..5a86f9a 100644 --- a/jquery.scrollbar.min.js +++ b/jquery.scrollbar.min.js @@ -9,8 +9,8 @@ * Compressed by http://jscompress.com/ * * @author Yuriy Khabarov aka Gromo - * @version 0.3.0 beta + * @version 0.2.11 * @url https://github.com/gromo/jquery.scrollbar/ * */ -!function(l,s){"function"==typeof define&&define.amd?define(["jquery"],s):s(l.jQuery)}(this,function(l){"use strict";function s(l){var s=l.originalEvent;return s.axis&&s.axis===s.HORIZONTAL_AXIS?!1:s.wheelDeltaX?!1:!0}var e={data:{index:0,name:"scrollbar",updateTimer:0},isWebkit:/webkit/i.test(navigator.userAgent)&&!/edge\/\d+/i.test(navigator.userAgent),isMac:/mac/i.test(navigator.platform),isMobile:/android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent),isOverlay:null,scroll:null,scrolls:[]};e.scrolls.add=function(l){this.remove(l).push(l)},e.scrolls.remove=function(s){for(;l.inArray(s,this)>=0;)this.splice(l.inArray(s,this),1);return this},e.scrolls.update=function(l){for(var s=0;s").addClass("scroll-wrapper").addClass(i.attr("class")).css("position","absolute"==i.css("position")?"absolute":"relative").insertBefore(i).append(i),i.is("textarea")&&(this.containerWrapper=r=l("
    ").insertBefore(i).append(i),d.addClass("scroll-textarea")),r.addClass("scroll-content"),i.on("scroll"+n,l.proxy(function(){l.isFunction(this.options.onScroll)&&this.options.onScroll.call(this,{scroll:this.container.scrollTop(),size:this.dimensions.scrollHeight,visible:this.dimensions.visibleHeight},{scroll:this.container.scrollLeft(),size:this.dimensions.scrollWidth,visible:this.dimensions.visibleWidth}),this.scrollx.isVisible&&this.scrollx.scroll.bar.css("left",i.scrollLeft()*this.scrollx.kx+"px"),this.scrolly.isVisible&&this.scrolly.scroll.bar.css("top",i.scrollTop()*this.scrolly.kx+"px")},this)),d.on("scroll"+n,function(){d.scrollTop(0).scrollLeft(0)}),a.disableBodyScroll){var p=function(l){s(l)?c.y.isVisible&&c.y.mousewheel(l):c.x.isVisible&&c.x.mousewheel(l)};d.on("MozMousePixelScroll"+n,p),d.on("mousewheel"+n,p),e.isMobile&&d.on("touchstart"+n,function(s){var e=s.originalEvent.touches&&s.originalEvent.touches[0]||s,o={pageX:e.pageX,pageY:e.pageY},t={left:i.scrollLeft(),top:i.scrollTop()};l(document).on("touchmove"+n,function(l){var s=l.originalEvent.targetTouches&&l.originalEvent.targetTouches[0]||l;i.scrollLeft(t.left+o.pageX-s.pageX),i.scrollTop(t.top+o.pageY-s.pageY),l.preventDefault()}),l(document).on("touchend"+n,function(){l(document).off(n)})})}l.isFunction(a.onInit)&&a.onInit.apply(this,[i])}r.css({height:"auto","margin-bottom":-1*e.scroll.height+"px","margin-right":-1*e.scroll.width+"px","max-height":""}),l.each(c,function(e,o){var r=null,d=1,h="x"===e?"scrollLeft":"scrollTop",p=a.scrollStep,u=function(){var l=i[h]();i[h](l+p),1==d&&l+p>=f&&(l=i[h]()),-1==d&&f>=l+p&&(l=i[h]()),i[h]()==l&&r&&r()},f=0;o.scroll||(o.scroll=t._getScroll(a["scroll"+e]).addClass("scroll-"+e),a.showArrows&&o.scroll.addClass("scroll-element_arrows_visible"),o.mousewheel=function(l){if(!o.isVisible||"x"===e&&s(l))return!0;if("y"===e&&!s(l))return c.x.mousewheel(l),!0;var r=-1*l.originalEvent.wheelDelta||l.originalEvent.detail,n=o.size-o.visible-o.offset;return(r>0&&n>f||0>r&&f>0)&&(f+=r,0>f&&(f=0),f>n&&(f=n),t.scrollTo=t.scrollTo||{},t.scrollTo[h]=f,setTimeout(function(){t.scrollTo&&(i.stop().animate(t.scrollTo,240,"linear",function(){f=i[h]()}),t.scrollTo=null)},1)),l.preventDefault(),!1},o.scroll.on("MozMousePixelScroll"+n,o.mousewheel).on("mousewheel"+n,o.mousewheel).on("mouseenter"+n,function(){f=i[h]()}),o.scroll.find(".scroll-arrow, .scroll-element_track").on("mousedown"+n,function(s){if(1!=s.which)return!0;d=1;var n={eventOffset:s["x"===e?"pageX":"pageY"],maxScrollValue:o.size-o.visible-o.offset,scrollbarOffset:o.scroll.bar.offset()["x"===e?"left":"top"],scrollbarSize:o.scroll.bar["x"===e?"outerWidth":"outerHeight"]()},c=0,v=0;return l(this).hasClass("scroll-arrow")?(d=l(this).hasClass("scroll-arrow_more")?1:-1,p=a.scrollStep*d,f=d>0?n.maxScrollValue:0):(d=n.eventOffset>n.scrollbarOffset+n.scrollbarSize?1:n.eventOffset").prependTo("body").attr("style","border:none;margin:0;padding:0;height:100px;width:100px;position:absolute;overflow:scroll;left:-1000px;top:-1000px;"),e.data.inner=l("
    ").appendTo(e.data.outer).attr("style","border:none;margin:0;padding:0;height:100%;width:100%;position:absolute;")),{height:e.data.outer.height()-e.data.inner.height(),width:e.data.outer.width()-e.data.inner.width()}},_getDimensions:function(){var l=this.container,s=this.wrapper;return{scrollHeight:l.prop("scrollHeight"),scrollWidth:l.prop("scrollWidth"),visibleHeight:s.height()+(parseInt(l.css("top"),10)||0),visibleWidth:s.width()+(parseInt(l.css("left"),10)||0)}},_getScroll:function(s){var e={advanced:['
    ','
    ','
    ','
    ','
    ','
    ','
    ','
    ','
    ',"
    ","
    ",'
    ','
    ','
    ',"
    ",'
    ','
    ',"
    ","
    ","
    "].join(""),simple:['
    ','
    ','
    ','
    ','
    ',"
    ","
    "].join("")};return e[s]&&(s=e[s]),s||(s=e.simple),s="string"==typeof s?l(s).appendTo(this.wrapper):l(s),l.extend(s,{bar:s.find(".scroll-bar"),size:s.find(".scroll-element_size"),track:s.find(".scroll-element_track")}),s},_handleMouseDown:function(s,e){var o=this.namespace;return l(document).on("blur"+o,function(){l(document).add("body").off(o),s&&s()}),l(document).on("dragstart"+o,function(l){return l.preventDefault(),!1}),l(document).on("mouseup"+o,function(){l(document).add("body").off(o),s&&s()}),l("body").on("selectstart"+o,function(l){return l.preventDefault(),!1}),e&&e.preventDefault(),!1},_isChanged:function(){var s=!1,e=this._getDimensions(),o=this.dimensions;return l.each(e,function(l,e){return o[l]!==e?(s=!0,!1):void 0}),this.dimensions=e,s&&this.options.debug&&window.console&&console.log(this.dimensions),s},_updateScroll:function(l,s){var o=this.container,t=this.containerWrapper||o,i="scroll-scroll"+l+"_visible",r="x"===l?this.scrolly:this.scrollx,n=(this.wrapper,this.dimensions["x"===l?"scrollWidth":"scrollHeight"]),a=this.dimensions["x"===l?"visibleWidth":"visibleHeight"];s.isVisible=n-a>1,t.add(s.scroll).add(r.scroll)[s.isVisible?"addClass":"removeClass"](i),"y"===l&&t.css(o.is("textarea")||a>n?{height:a+e.scroll.height+"px","max-height":"none"}:{"max-height":a+e.scroll.height+"px"}),this._isChanged()&&this._updateScroll("x"===l?"y":"x",r)},_updateScrollSize:function(l,s){var e="x"===l?"left":"top",o="x"===l?"outerWidth":"outerHeight",t="x"===l?"width":"height",i=this.dimensions["x"===l?"scrollWidth":"scrollHeight"],r=this.dimensions["x"===l?"visibleWidth":"visibleHeight"],n=s.scroll.size[o]()+(parseInt(s.scroll.size.css(e),10)||0);this.options.autoScrollSize&&(s.scrollbarSize=parseInt(n*r/i,10),s.scroll.bar.css(t,s.scrollbarSize+"px")),s.scrollbarSize=s.scroll.bar[o](),s.kx=(n-s.scrollbarSize)/(i-r)||1}};var i=function(){e.scroll||l(window).resize(l.proxy(function(){var l=!1;if(e.scroll&&!e.isOverlay){var s=this._getBrowserScrollSize();(s.height!==e.scroll.height||s.width!==e.scroll.width)&&(e.scroll=s,l=!0)}e.scrolls.update(l)},this)),t.apply(this,arguments)};i.prototype=l.extend({},t.prototype,{});var r=function(){i.apply(this,arguments)};r.prototype=l.extend({},i.prototype,{});var n=function(){i.apply(this,arguments)};n.prototype=l.extend({},i.prototype,{});var a=function(){t.apply(this,arguments)};a.prototype=l.extend({},t.prototype,{});var c=i;switch(!0){case e.isFF:c=r;break;case e.isIE:c=n;break;case e.isWebkit:c=a}l.fn.scrollbar=function(s,o){return"string"!=typeof s&&(o=s,s="init"),"undefined"==typeof o&&(o=[]),l.isArray(o)||(o=[o]),this.not("body, .scroll-wrapper").each(function(){var t=l(this),i=t.data(e.data.name);(i||"init"===s)&&(i||(i=new c(t)),i[s]&&i[s].apply(i,o))}),this},l.fn.scrollbar.options=o,window.angular&&!function(l){l.module("jQueryScrollbar",[]).provider("jQueryScrollbar",function(){return{setOptions:function(s){l.extend(o,s)},$get:function(){return{options:l.copy(o)}}}}).directive("jqueryScrollbar",function(l,s){return{restrict:"AC",link:function(e,o,t){var i=s(t.jqueryScrollbar),r=i(e);o.scrollbar(r||l.options).on("$destroy",function(){o.scrollbar("destroy")})}}})}(window.angular)}); \ No newline at end of file +!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],b):b("undefined"!=typeof exports?require("jquery"):a.jQuery)}(this,function(a){"use strict";function h(b){if(c.webkit&&!b)return{height:0,width:0};if(!c.data.outer){var d={border:"none","box-sizing":"content-box",height:"200px",margin:"0",padding:"0",width:"200px"};c.data.inner=a("
    ").css(a.extend({},d)),c.data.outer=a("
    ").css(a.extend({left:"-1000px",overflow:"scroll",position:"absolute",top:"-1000px"},d)).append(c.data.inner).appendTo("body")}return c.data.outer.scrollLeft(1e3).scrollTop(1e3),{height:Math.ceil(c.data.outer.offset().top-c.data.inner.offset().top||0),width:Math.ceil(c.data.outer.offset().left-c.data.inner.offset().left||0)}}function i(){var a=h(!0);return!(a.height||a.width)}function j(a){var b=a.originalEvent;return(!b.axis||b.axis!==b.HORIZONTAL_AXIS)&&!b.wheelDeltaX}var b=!1,c={data:{index:0,name:"scrollbar"},firefox:/firefox/i.test(navigator.userAgent),macosx:/mac/i.test(navigator.platform),msedge:/edge\/\d+/i.test(navigator.userAgent),msie:/(msie|trident)/i.test(navigator.userAgent),mobile:/android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent),overlay:null,scroll:null,scrolls:[],webkit:/webkit/i.test(navigator.userAgent)&&!/edge\/\d+/i.test(navigator.userAgent)};c.scrolls.add=function(a){this.remove(a).push(a)},c.scrolls.remove=function(b){for(;a.inArray(b,this)>=0;)this.splice(a.inArray(b,this),1);return this};var d={autoScrollSize:!0,autoUpdate:!0,debug:!1,disableBodyScroll:!1,duration:200,ignoreMobile:!1,ignoreOverlay:!1,isRtl:!1,scrollStep:30,showArrows:!1,stepScrolling:!0,scrollx:null,scrolly:null,onDestroy:null,onFallback:null,onInit:null,onScroll:null,onUpdate:null},e=function(b){c.scroll||(c.overlay=i(),c.scroll=h(),g(),a(window).resize(function(){var a=!1;if(c.scroll&&(c.scroll.height||c.scroll.width)){var b=h();b.height===c.scroll.height&&b.width===c.scroll.width||(c.scroll=b,a=!0)}g(a)})),this.container=b,this.namespace=".scrollbar_"+c.data.index++,this.options=a.extend({},d,window.jQueryScrollbarOptions||{}),this.scrollTo=null,this.scrollx={},this.scrolly={},b.data(c.data.name,this),c.scrolls.add(this)};e.prototype={destroy:function(){if(this.wrapper){this.container.removeData(c.data.name),c.scrolls.remove(this);var b=this.container.scrollLeft(),d=this.container.scrollTop();this.container.insertBefore(this.wrapper).css({height:"",margin:"","max-height":""}).removeClass("scroll-content scroll-scrollx_visible scroll-scrolly_visible").off(this.namespace).scrollLeft(b).scrollTop(d),this.scrollx.scroll.removeClass("scroll-scrollx_visible").find("div").addBack().off(this.namespace),this.scrolly.scroll.removeClass("scroll-scrolly_visible").find("div").addBack().off(this.namespace),this.wrapper.remove(),a(document).add("body").off(this.namespace),a.isFunction(this.options.onDestroy)&&this.options.onDestroy.apply(this,[this.container])}},init:function(b){var d=this,e=this.container,f=this.containerWrapper||e,g=this.namespace,h=a.extend(this.options,b||{}),i={x:this.scrollx,y:this.scrolly},k=this.wrapper,l={},m={scrollLeft:e.scrollLeft(),scrollTop:e.scrollTop()};if(c.mobile&&h.ignoreMobile||c.overlay&&h.ignoreOverlay||c.macosx&&!c.webkit)return a.isFunction(h.onFallback)&&h.onFallback.apply(this,[e]),!1;if(k)l={height:"auto","margin-bottom":c.scroll.height*-1+"px","max-height":""},l[h.isRtl?"margin-left":"margin-right"]=c.scroll.width*-1+"px",f.css(l);else{if(this.wrapper=k=a("
    ").addClass("scroll-wrapper").addClass(e.attr("class")).css("position","absolute"===e.css("position")?"absolute":"relative").insertBefore(e).append(e),h.isRtl&&k.addClass("scroll--rtl"),e.is("textarea")&&(this.containerWrapper=f=a("
    ").insertBefore(e).append(e),k.addClass("scroll-textarea")),l={height:"auto","margin-bottom":c.scroll.height*-1+"px","max-height":""},l[h.isRtl?"margin-left":"margin-right"]=c.scroll.width*-1+"px",f.addClass("scroll-content").css(l),e.on("scroll"+g,function(b){var f=e.scrollLeft(),g=e.scrollTop();if(h.isRtl)switch(!0){case c.firefox:f=Math.abs(f);case c.msedge||c.msie:f=e[0].scrollWidth-e[0].clientWidth-f}a.isFunction(h.onScroll)&&h.onScroll.call(d,{maxScroll:i.y.maxScrollOffset,scroll:g,size:i.y.size,visible:i.y.visible},{maxScroll:i.x.maxScrollOffset,scroll:f,size:i.x.size,visible:i.x.visible}),i.x.isVisible&&i.x.scroll.bar.css("left",f*i.x.kx+"px"),i.y.isVisible&&i.y.scroll.bar.css("top",g*i.y.kx+"px")}),k.on("scroll"+g,function(){k.scrollTop(0).scrollLeft(0)}),h.disableBodyScroll){var n=function(a){j(a)?i.y.isVisible&&i.y.mousewheel(a):i.x.isVisible&&i.x.mousewheel(a)};k.on("MozMousePixelScroll"+g,n),k.on("mousewheel"+g,n),c.mobile&&k.on("touchstart"+g,function(b){var c=b.originalEvent.touches&&b.originalEvent.touches[0]||b,d={pageX:c.pageX,pageY:c.pageY},f={left:e.scrollLeft(),top:e.scrollTop()};a(document).on("touchmove"+g,function(a){var b=a.originalEvent.targetTouches&&a.originalEvent.targetTouches[0]||a;e.scrollLeft(f.left+d.pageX-b.pageX),e.scrollTop(f.top+d.pageY-b.pageY),a.preventDefault()}),a(document).on("touchend"+g,function(){a(document).off(g)})})}a.isFunction(h.onInit)&&h.onInit.apply(this,[e])}a.each(i,function(b,f){var k=null,l=1,m="x"===b?"scrollLeft":"scrollTop",n=h.scrollStep,o=function(){var a=e[m]();e[m](a+n),1==l&&a+n>=p&&(a=e[m]()),l==-1&&a+n<=p&&(a=e[m]()),e[m]()==a&&k&&k()},p=0;f.scroll||(f.scroll=d._getScroll(h["scroll"+b]).addClass("scroll-"+b),h.showArrows&&f.scroll.addClass("scroll-element_arrows_visible"),f.mousewheel=function(a){if(!f.isVisible||"x"===b&&j(a))return!0;if("y"===b&&!j(a))return i.x.mousewheel(a),!0;var c=a.originalEvent.wheelDelta*-1||a.originalEvent.detail,g=f.size-f.visible-f.offset;return c||("x"===b&&a.originalEvent.deltaX?c=40*a.originalEvent.deltaX:"y"===b&&a.originalEvent.deltaY&&(c=40*a.originalEvent.deltaY)),(c>0&&p<0&&p>0)&&(p+=c,p<0&&(p=0),p>g&&(p=g),d.scrollTo=d.scrollTo||{},d.scrollTo[m]=p,setTimeout(function(){d.scrollTo&&(e.stop().animate(d.scrollTo,240,"linear",function(){p=e[m]()}),d.scrollTo=null)},1)),a.preventDefault(),!1},f.scroll.on("MozMousePixelScroll"+g,f.mousewheel).on("mousewheel"+g,f.mousewheel).on("mouseenter"+g,function(){p=e[m]()}),f.scroll.find(".scroll-arrow, .scroll-element_track").on("mousedown"+g,function(g){if(1!=g.which)return!0;l=1;var i={eventOffset:g["x"===b?"pageX":"pageY"],maxScrollValue:f.size-f.visible-f.offset,scrollbarOffset:f.scroll.bar.offset()["x"===b?"left":"top"],scrollbarSize:f.scroll.bar["x"===b?"outerWidth":"outerHeight"]()},j=0,q=0;if(a(this).hasClass("scroll-arrow")){if(l=a(this).hasClass("scroll-arrow_more")?1:-1,n=h.scrollStep*l,p=l>0?i.maxScrollValue:0,h.isRtl)switch(!0){case c.firefox:p=l>0?0:i.maxScrollValue*-1;break;case c.msie||c.msedge:}}else l=i.eventOffset>i.scrollbarOffset+i.scrollbarSize?1:i.eventOffset','
    ','
    ','
    ','
    ','
    ','
    ','
    ','
    ',"
    ","
    ",'
    ','
    ','
    ',"
    ",'
    ','
    ',"
    ","
    ","
    "].join(""),simple:['
    ','
    ','
    ','
    ','
    ',"
    ","
    "].join("")};return c[b]&&(b=c[b]),b||(b=c.simple),b="string"==typeof b?a(b).appendTo(this.wrapper):a(b),a.extend(b,{bar:b.find(".scroll-bar"),size:b.find(".scroll-element_size"),track:b.find(".scroll-element_track")}),b},_handleMouseDown:function(b,c){var d=this.namespace;return a(document).on("blur"+d,function(){a(document).add("body").off(d),b&&b()}),a(document).on("dragstart"+d,function(a){return a.preventDefault(),!1}),a(document).on("mouseup"+d,function(){a(document).add("body").off(d),b&&b()}),a("body").on("selectstart"+d,function(a){return a.preventDefault(),!1}),c&&c.preventDefault(),!1},_updateScroll:function(b,d){var e=this.container,f=this.containerWrapper||e,g="scroll-scroll"+b+"_visible",h="x"===b?this.scrolly:this.scrollx,i=parseInt(this.container.css("x"===b?"left":"top"),10)||0,j=this.wrapper,k=d.size,l=d.visible+i;d.isVisible=k-l>1,d.isVisible?(d.scroll.addClass(g),h.scroll.addClass(g),f.addClass(g)):(d.scroll.removeClass(g),h.scroll.removeClass(g),f.removeClass(g)),"y"===b&&(e.is("textarea")||k10?(window.console&&console.log("Scroll updates exceed 10"),g=function(){}):(clearTimeout(a),a=setTimeout(g,300))}}();window.angular&&!function(a){a.module("jQueryScrollbar",[]).provider("jQueryScrollbar",function(){var b=d;return{setOptions:function(c){a.extend(b,c)},$get:function(){return{options:a.copy(b)}}}}).directive("jqueryScrollbar",["jQueryScrollbar","$parse",function(a,b){return{restrict:"AC",link:function(c,d,e){var f=b(e.jqueryScrollbar),g=f(c);d.scrollbar(g||a.options).on("$destroy",function(){d.scrollbar("destroy")})}}}])}(window.angular)}); \ No newline at end of file diff --git a/package.js b/package.js index dc31481..6a5ad53 100644 --- a/package.js +++ b/package.js @@ -6,7 +6,7 @@ var where = 'client'; // where to install: 'client' or 'server'. For both, pass Package.describe({ name: packageName, - version: '0.0.1', + version: '0.2.11', // Brief, one-line summary of the package. summary: 'Cross-browser CSS customizable scrollbar with advanced features.', // URL to the Git repository containing the source code for this package. diff --git a/package.json b/package.json index 34dd50b..3d7ba2a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jquery.scrollbar", - "version": "0.2.8", + "version": "0.2.11", "description": "Cross-browser CSS customizable scrollbar", "main": "index.js", "scripts": { diff --git a/sass/Gruntfile.js b/sass/Gruntfile.js new file mode 100644 index 0000000..a983423 --- /dev/null +++ b/sass/Gruntfile.js @@ -0,0 +1,22 @@ +module.exports = function (grunt) { + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + compass: { + auto: { + options: { + sassDir: './', + cssDir: '../' + } + } + }, + watch: { + scss: { + files: ['./**/*.scss'], + tasks: ['compass'] + } + } + }); + grunt.loadNpmTasks('grunt-contrib-compass'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.registerTask('default', ['watch']); +}; \ No newline at end of file diff --git a/sass/config.rb b/sass/config.rb new file mode 100644 index 0000000..eb6e6e4 --- /dev/null +++ b/sass/config.rb @@ -0,0 +1,2 @@ +require 'compass/import-once/activate' +line_comments = false diff --git a/sass/jquery.scrollbar.scss b/sass/jquery.scrollbar.scss new file mode 100644 index 0000000..118d29a --- /dev/null +++ b/sass/jquery.scrollbar.scss @@ -0,0 +1,793 @@ +/*************** SCROLLBAR BASE CSS ***************/ + +.scroll-wrapper { + overflow: hidden !important; + padding: 0 !important; + position: relative; + + & > .scroll-content { + border: none !important; + box-sizing: content-box !important; + height: auto; + left: 0; + margin: 0; + max-height: none; + max-width: none !important; + overflow: scroll !important; + padding: 0; + position: relative !important; + top: 0; + width: auto !important; + + &::-webkit-scrollbar { + height: 0; + width: 0; + } + } + &.scroll--rtl { + direction: rtl; + } +} + +.scroll-element { + box-sizing: content-box; + display: none; + + div { + box-sizing: content-box; + } + .scroll-bar, + .scroll-arrow { + cursor: default; + } + + &.scroll-x.scroll-scrollx_visible, + &.scroll-y.scroll-scrolly_visible { + display: block; + } +} + +.scroll-textarea { + border: 1px solid #cccccc; + border-top-color: #999999; + + & > .scroll-content { + overflow: hidden !important; + + & > textarea { + border: none !important; + box-sizing: border-box; + height: 100% !important; + margin: 0; + max-height: none !important; + max-width: none !important; + overflow: scroll !important; + outline: none; + padding: 2px; + position: relative !important; + top: 0; + width: 100% !important; + + &::-webkit-scrollbar { + height: 0; + width: 0; + } + } + } +} + + + + +/*************** SIMPLE INNER SCROLLBAR ***************/ + +.scrollbar-inner > .scroll-element, +.scrollbar-inner > .scroll-element div +{ + border: none; + margin: 0; + padding: 0; + position: absolute; + z-index: 10; +} + +.scrollbar-inner > .scroll-element div { + display: block; + height: 100%; + left: 0; + top: 0; + width: 100%; +} + +.scrollbar-inner > .scroll-element.scroll-x { + bottom: 2px; + height: 8px; + left: 0; + width: 100%; +} + +.scrollbar-inner > .scroll-element.scroll-y { + height: 100%; + right: 2px; + top: 0; + width: 8px; +} + +.scrollbar-inner > .scroll-element .scroll-element_outer { + overflow: hidden; +} + +.scrollbar-inner > .scroll-element .scroll-element_outer, +.scrollbar-inner > .scroll-element .scroll-element_track, +.scrollbar-inner > .scroll-element .scroll-bar { + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; +} + +.scrollbar-inner > .scroll-element .scroll-element_track, +.scrollbar-inner > .scroll-element .scroll-bar { + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + opacity: 0.4; +} + +.scrollbar-inner > .scroll-element .scroll-element_track { background-color: #e0e0e0; } +.scrollbar-inner > .scroll-element .scroll-bar { background-color: #c2c2c2; } +.scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #919191; } +.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; } + + +/* update scrollbar offset if both scrolls are visible */ + +.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; } +.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; } + + +.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; } +.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; } + + + + + + + + + + +/*************** SIMPLE OUTER SCROLLBAR ***************/ + +.scrollbar-outer > .scroll-element, +.scrollbar-outer > .scroll-element div +{ + border: none; + margin: 0; + padding: 0; + position: absolute; + z-index: 10; +} + +.scrollbar-outer > .scroll-element { + background-color: #ffffff; +} + +.scrollbar-outer > .scroll-element div { + display: block; + height: 100%; + left: 0; + top: 0; + width: 100%; +} + +.scrollbar-outer > .scroll-element.scroll-x { + bottom: 0; + height: 12px; + left: 0; + width: 100%; +} + +.scrollbar-outer > .scroll-element.scroll-y { + height: 100%; + right: 0; + top: 0; + width: 12px; +} + +.scrollbar-outer > .scroll-element.scroll-x .scroll-element_outer { height: 8px; top: 2px; } +.scrollbar-outer > .scroll-element.scroll-y .scroll-element_outer { left: 2px; width: 8px; } + +.scrollbar-outer > .scroll-element .scroll-element_outer { overflow: hidden; } +.scrollbar-outer > .scroll-element .scroll-element_track { background-color: #eeeeee; } + +.scrollbar-outer > .scroll-element .scroll-element_outer, +.scrollbar-outer > .scroll-element .scroll-element_track, +.scrollbar-outer > .scroll-element .scroll-bar { + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; +} + +.scrollbar-outer > .scroll-element .scroll-bar { background-color: #d9d9d9; } +.scrollbar-outer > .scroll-element .scroll-bar:hover { background-color: #c2c2c2; } +.scrollbar-outer > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; } + + +/* scrollbar height/width & offset from container borders */ + +.scrollbar-outer > .scroll-content.scroll-scrolly_visible { left: -12px; margin-left: 12px; } +.scrollbar-outer > .scroll-content.scroll-scrollx_visible { top: -12px; margin-top: 12px; } + +.scrollbar-outer > .scroll-element.scroll-x .scroll-bar { min-width: 10px; } +.scrollbar-outer > .scroll-element.scroll-y .scroll-bar { min-height: 10px; } + + +/* update scrollbar offset if both scrolls are visible */ + +.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -14px; } +.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -14px; } + +.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -14px; } +.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -14px; } + + + + + + + + + + +/*************** SCROLLBAR MAC OS X ***************/ + +.scrollbar-macosx > .scroll-element, +.scrollbar-macosx > .scroll-element div +{ + background: none; + border: none; + margin: 0; + padding: 0; + position: absolute; + z-index: 10; +} + +.scrollbar-macosx > .scroll-element div { + display: block; + height: 100%; + left: 0; + top: 0; + width: 100%; +} + +.scrollbar-macosx > .scroll-element .scroll-element_track { display: none; } +.scrollbar-macosx > .scroll-element .scroll-bar { + background-color: #6C6E71; + display: block; + + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + opacity: 0; + + -webkit-border-radius: 7px; + -moz-border-radius: 7px; + border-radius: 7px; + + -webkit-transition: opacity 0.2s linear; + -moz-transition: opacity 0.2s linear; + -o-transition: opacity 0.2s linear; + -ms-transition: opacity 0.2s linear; + transition: opacity 0.2s linear; +} +.scrollbar-macosx:hover > .scroll-element .scroll-bar, +.scrollbar-macosx > .scroll-element.scroll-draggable .scroll-bar { + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; + filter: alpha(opacity=70); + opacity: 0.7; +} + + +.scrollbar-macosx > .scroll-element.scroll-x { + bottom: 0px; + height: 0px; + left: 0; + min-width: 100%; + overflow: visible; + width: 100%; +} + +.scrollbar-macosx > .scroll-element.scroll-y { + height: 100%; + min-height: 100%; + right: 0px; + top: 0; + width: 0px; +} + +/* scrollbar height/width & offset from container borders */ +.scrollbar-macosx > .scroll-element.scroll-x .scroll-bar { height: 7px; min-width: 10px; top: -9px; } +.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { left: -9px; min-height: 10px; width: 7px; } + +.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer { left: 2px; } +.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size { left: -4px; } + +.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer { top: 2px; } +.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size { top: -4px; } + +/* update scrollbar offset if both scrolls are visible */ +.scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; } +.scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; } + + + + + + + + + + +/*************** SCROLLBAR LIGHT ***************/ + +.scrollbar-light > .scroll-element, +.scrollbar-light > .scroll-element div { + border: none; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + z-index: 10; +} + +.scrollbar-light > .scroll-element { + background-color: #ffffff; +} + +.scrollbar-light > .scroll-element div { + display: block; + height: 100%; + left: 0; + top: 0; + width: 100%; +} + +.scrollbar-light > .scroll-element .scroll-element_outer { + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; +} + +.scrollbar-light > .scroll-element .scroll-element_size { + background: #dbdbdb; + background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+'); + background: -moz-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%); + background: -webkit-gradient(linear, left top, right top, color-stop(0%,#dbdbdb), color-stop(100%,#e8e8e8)); + background: -webkit-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%); + background: -o-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%); + background: -ms-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%); + background: linear-gradient(to right, #dbdbdb 0%,#e8e8e8 100%); + + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; +} + +.scrollbar-light > .scroll-element.scroll-x { + bottom: 0; + height: 17px; + left: 0; + min-width: 100%; + width: 100%; +} + +.scrollbar-light > .scroll-element.scroll-y { + height: 100%; + min-height: 100%; + right: 0; + top: 0; + width: 17px; +} + +.scrollbar-light > .scroll-element .scroll-bar { + background: #fefefe; + background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+'); + background: -moz-linear-gradient(left, #fefefe 0%, #f5f5f5 100%); + background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fefefe), color-stop(100%,#f5f5f5)); + background: -webkit-linear-gradient(left, #fefefe 0%,#f5f5f5 100%); + background: -o-linear-gradient(left, #fefefe 0%,#f5f5f5 100%); + background: -ms-linear-gradient(left, #fefefe 0%,#f5f5f5 100%); + background: linear-gradient(to right, #fefefe 0%,#f5f5f5 100%); + + border: 1px solid #dbdbdb; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; +} + +/* scrollbar height/width & offset from container borders */ + +.scrollbar-light > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; } +.scrollbar-light > .scroll-content.scroll-scrollx_visible { top: -17px; margin-top: 17px; } + +.scrollbar-light > .scroll-element.scroll-x .scroll-bar { height: 10px; min-width: 10px; top: 0px; } +.scrollbar-light > .scroll-element.scroll-y .scroll-bar { left: 0px; min-height: 10px; width: 10px; } + +.scrollbar-light > .scroll-element.scroll-x .scroll-element_outer { height: 12px; left: 2px; top: 2px; } +.scrollbar-light > .scroll-element.scroll-x .scroll-element_size { left: -4px; } + +.scrollbar-light > .scroll-element.scroll-y .scroll-element_outer { left: 2px; top: 2px; width: 12px; } +.scrollbar-light > .scroll-element.scroll-y .scroll-element_size { top: -4px; } + +/* update scrollbar offset if both scrolls are visible */ + +.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -19px; } +.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -19px; } + +.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -19px; } +.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -19px; } + + + + + + + + + + +/*************** SCROLLBAR RAIL ***************/ + +.scrollbar-rail > .scroll-element, +.scrollbar-rail > .scroll-element div +{ + border: none; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + z-index: 10; +} + +.scrollbar-rail > .scroll-element { + background-color: #ffffff; +} + +.scrollbar-rail > .scroll-element div { + display: block; + height: 100%; + left: 0; + top: 0; + width: 100%; +} + +.scrollbar-rail > .scroll-element .scroll-element_size { + background-color: #999; + background-color: rgba(0, 0, 0, 0.3); +} + +.scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-element_size { + background-color: #666; + background-color: rgba(0, 0, 0, 0.5); +} + +.scrollbar-rail > .scroll-element.scroll-x { + bottom: 0; + height: 12px; + left: 0; + min-width: 100%; + padding: 3px 0 2px; + width: 100%; +} + +.scrollbar-rail > .scroll-element.scroll-y { + height: 100%; + min-height: 100%; + padding: 0 2px 0 3px; + right: 0; + top: 0; + width: 12px; +} + +.scrollbar-rail > .scroll-element .scroll-bar { + background-color: #d0b9a0; + + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); +} + +.scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-bar { + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); +} + +/* scrollbar height/width & offset from container borders */ + +.scrollbar-rail > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; } +.scrollbar-rail > .scroll-content.scroll-scrollx_visible { margin-top: 17px; top: -17px; } + +.scrollbar-rail > .scroll-element.scroll-x .scroll-bar { height: 10px; min-width: 10px; top: 1px; } +.scrollbar-rail > .scroll-element.scroll-y .scroll-bar { left: 1px; min-height: 10px; width: 10px; } + +.scrollbar-rail > .scroll-element.scroll-x .scroll-element_outer { height: 15px; left: 5px; } +.scrollbar-rail > .scroll-element.scroll-x .scroll-element_size { height: 2px; left: -10px; top: 5px; } + +.scrollbar-rail > .scroll-element.scroll-y .scroll-element_outer { top: 5px; width: 15px; } +.scrollbar-rail > .scroll-element.scroll-y .scroll-element_size { left: 5px; top: -10px; width: 2px; } + +/* update scrollbar offset if both scrolls are visible */ + +.scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -25px; } +.scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -25px; } + +.scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -25px; } +.scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -25px; } + + + + + + + + + + +/*************** SCROLLBAR DYNAMIC ***************/ + +.scrollbar-dynamic > .scroll-element, +.scrollbar-dynamic > .scroll-element div +{ + background: none; + border: none; + margin: 0; + padding: 0; + position: absolute; + z-index: 10; +} + +.scrollbar-dynamic > .scroll-element div { + display: block; + height: 100%; + left: 0; + top: 0; + width: 100%; +} + +.scrollbar-dynamic > .scroll-element.scroll-x { + bottom: 2px; + height: 7px; + left: 0; + min-width: 100%; + width: 100%; +} + +.scrollbar-dynamic > .scroll-element.scroll-y { + height: 100%; + min-height: 100%; + right: 2px; + top: 0; + width: 7px; +} + +.scrollbar-dynamic > .scroll-element .scroll-element_outer { + opacity: 0.3; + + -webkit-border-radius: 12px; + -moz-border-radius: 12px; + border-radius: 12px; +} +.scrollbar-dynamic > .scroll-element .scroll-element_size { + background-color: #cccccc; + opacity: 0; + + -webkit-border-radius: 12px; + -moz-border-radius: 12px; + border-radius: 12px; + + -webkit-transition: opacity 0.2s; + -moz-transition: opacity 0.2s; + -o-transition: opacity 0.2s; + -ms-transition: opacity 0.2s; + transition: opacity 0.2s; +} + +.scrollbar-dynamic > .scroll-element .scroll-bar { + background-color: #6c6e71; + + -webkit-border-radius: 7px; + -moz-border-radius: 7px; + border-radius: 7px; +} + +/* scrollbar height/width & offset from container borders */ + +.scrollbar-dynamic > .scroll-element.scroll-x .scroll-bar { + bottom: 0; + height: 7px; + min-width: 24px; + top: auto; +} +.scrollbar-dynamic > .scroll-element.scroll-y .scroll-bar { + left: auto; + min-height: 24px; + right: 0; + width: 7px; +} + +.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_outer { + bottom: 0; + top: auto; + left: 2px; + + -webkit-transition: height 0.2s; + -moz-transition: height 0.2s; + -o-transition: height 0.2s; + -ms-transition: height 0.2s; + transition: height 0.2s; +} + +.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_outer { + left: auto; + right: 0; + top: 2px; + + -webkit-transition: width 0.2s; + -moz-transition: width 0.2s; + -o-transition: width 0.2s; + -ms-transition: width 0.2s; + transition: width 0.2s; +} + +.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_size { left: -4px; } +.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_size { top: -4px; } + + +/* update scrollbar offset if both scrolls are visible */ + +.scrollbar-dynamic > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; } +.scrollbar-dynamic > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; } + + +/* hover & drag */ + +.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer, +.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer { + overflow: hidden; + + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; + filter: alpha(opacity=70); + opacity: 0.7; +} +.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-element_size, +.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-element_size { + opacity: 1; +} +.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-bar, +.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-bar { + height: 100%; + width: 100%; + + -webkit-border-radius: 12px; + -moz-border-radius: 12px; + border-radius: 12px; +} + +.scrollbar-dynamic > .scroll-element.scroll-x:hover .scroll-element_outer, +.scrollbar-dynamic > .scroll-element.scroll-x.scroll-draggable .scroll-element_outer { + height: 20px; + min-height: 7px; +} +.scrollbar-dynamic > .scroll-element.scroll-y:hover .scroll-element_outer, +.scrollbar-dynamic > .scroll-element.scroll-y.scroll-draggable .scroll-element_outer { + min-width: 7px; + width: 20px; +} + + + + + + + + + + +/*************** SCROLLBAR GOOGLE CHROME ***************/ + +.scrollbar-chrome > .scroll-element, +.scrollbar-chrome > .scroll-element div +{ + border: none; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + z-index: 10; +} + +.scrollbar-chrome > .scroll-element { + background-color: #ffffff; +} + +.scrollbar-chrome > .scroll-element div { + display: block; + height: 100%; + left: 0; + top: 0; + width: 100%; +} + +.scrollbar-chrome > .scroll-element .scroll-element_outer {} + +.scrollbar-chrome > .scroll-element .scroll-element_track { + background: #f1f1f1; + border: 1px solid #dbdbdb; +} + +.scrollbar-chrome > .scroll-element.scroll-x { + bottom: 0; + height: 16px; + left: 0; + min-width: 100%; + width: 100%; +} + +.scrollbar-chrome > .scroll-element.scroll-y { + height: 100%; + min-height: 100%; + right: 0; + top: 0; + width: 16px; +} + +.scrollbar-chrome > .scroll-element .scroll-bar { + background-color: #d9d9d9; + border: 1px solid #bdbdbd; + cursor: default; + + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; +} + +.scrollbar-chrome > .scroll-element .scroll-bar:hover { + background-color: #c2c2c2; + border-color: #a9a9a9; +} + +.scrollbar-chrome > .scroll-element.scroll-draggable .scroll-bar { + background-color: #919191; + border-color: #7e7e7e; +} + +/* scrollbar height/width & offset from container borders */ + +.scrollbar-chrome > .scroll-content.scroll-scrolly_visible { left: -16px; margin-left: 16px; } +.scrollbar-chrome > .scroll-content.scroll-scrollx_visible { top: -16px; margin-top: 16px; } + +.scrollbar-chrome > .scroll-element.scroll-x .scroll-bar { height: 8px; min-width: 10px; top: 3px; } +.scrollbar-chrome > .scroll-element.scroll-y .scroll-bar { left: 3px; min-height: 10px; width: 8px; } + +.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_outer { border-left: 1px solid #dbdbdb; } +.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_track { height: 14px; left: -3px; } +.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_size { height: 14px; left: -4px; } + +.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_outer { border-top: 1px solid #dbdbdb; } +.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_track { top: -3px; width: 14px; } +.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_size { top: -4px; width: 14px; } + +/* update scrollbar offset if both scrolls are visible */ + +.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -19px; } +.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -19px; } + +.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -19px; } +.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -19px; } + + + + + + + diff --git a/sass/package.json b/sass/package.json new file mode 100644 index 0000000..fd871d6 --- /dev/null +++ b/sass/package.json @@ -0,0 +1,9 @@ +{ + "name": "jquery.scrollbar", + "version": "0.2.11", + "devDependencies": { + "grunt": "~0.4.1", + "grunt-contrib-compass": "^1.0.4", + "grunt-contrib-watch": "~0.6.1" + } +} diff --git a/scrollbar.jquery.json b/scrollbar.jquery.json index 1da2dd2..fa0156b 100644 --- a/scrollbar.jquery.json +++ b/scrollbar.jquery.json @@ -6,7 +6,7 @@ "scroll", "scrollbar" ], - "version": "0.2.8", + "version": "0.2.11", "author": { "name": "Yuriy Khabarov", "email": "13real008@gmail.com"