Merge pull request #287 from DanielApt/nojs-fallback

No longer require to manually add overflow:hidden, plugin does this. [#285]
2015-02-22 19:16:43 +01:00 · 2015-02-22 19:16:43 +01:00 · c280c270b8
commit c280c270b8
parent 05ccc0a5cb 73ff93984b
19 changed files with 21 additions and 18 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,3 +2,4 @@
 node_modules
 bower_components
 /dist
+.idea
--- a/README.md
+++ b/README.md
@ -97,11 +97,11 @@ But, they're all very trivial and there is nothing to worry about.
 The following requirements should meet.

 * the container must have a 'position' css style.
-* the container must have an 'overflow:hidden' css style.

 The following requirements are included in the basic CSS, but please
 keep in mind when you'd like to change the CSS files.

+* the container must have an 'overflow:hidden' css style.
 * the scrollbar's position must be 'absolute'.
 * the scrollbar-x must have a 'bottom' css style, and the scrollbar-y
  must have a 'right' css style.
@ -117,7 +117,6 @@ requirements.
  #container {
    position: relative;
    height: 100%; /* Or whatever you want (eg. 400px) */
-    overflow: hidden;
  }
 </style>
 ```
--- a/examples/always-visible.html
+++ b/examples/always-visible.html
@ -7,7 +7,7 @@
    <script src="../dist/js/perfect-scrollbar.js"></script>
    <style>
      h1 { text-align: center; }
-      .container { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
+      .container { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
      .container .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
    </style>
    <style>
--- a/examples/iframe-content.html
+++ b/examples/iframe-content.html
@ -5,7 +5,7 @@
    <title>perfect-scrollbar example</title>
      <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
      <style>
-        .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
+        .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px;}
        .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
        .spacer { text-align:center }
      </style>
--- a/examples/jquery.html
+++ b/examples/jquery.html
@ -7,7 +7,7 @@
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="../dist/js/perfect-scrollbar.jquery.js"></script>
    <style>
-      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
+      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
      .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
      .spacer { text-align:center }
    </style>
--- a/examples/options-default.html
+++ b/examples/options-default.html
@ -6,7 +6,7 @@
    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
    <script src="../dist/js/perfect-scrollbar.js"></script>
    <style>
-      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
+      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
      .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
      .spacer { text-align:center }
    </style>
--- a/examples/options-minScrollbarLength.html
+++ b/examples/options-minScrollbarLength.html
@ -6,7 +6,7 @@
    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
    <script src="../dist/js/perfect-scrollbar.js"></script>
    <style>
-      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 640px; height: 360px; overflow: hidden; }
+      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 640px; height: 360px; overflow: auto; }
      .contentHolder .content { background-image: url('./azusa.jpg'); width: 12800px; height: 7200px; }
      .spacer { text-align:center }
    </style>
--- a/examples/options-suppressScrollAxis.html
+++ b/examples/options-suppressScrollAxis.html
@ -6,7 +6,7 @@
    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
    <script src="../dist/js/perfect-scrollbar.js"></script>
    <style>
-      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
+      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
      .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
      .spacer { text-align:center }
      h2 { text-align: center; }
--- a/examples/options-useBothWheelAxes.html
+++ b/examples/options-useBothWheelAxes.html
@ -6,7 +6,7 @@
    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
    <script src="../dist/js/perfect-scrollbar.js"></script>
    <style>
-      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 640px; height: 360px; overflow: hidden; }
+      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 640px; height: 360px; overflow: auto; }
      .contentHolder .content-x { background-image: url('./azusa.jpg'); width: 1920px; height: 360px; }
      .contentHolder .content-y { background-image: url('./azusa.jpg'); width: 640px; height: 1080px; }
      .spacer { text-align:center; }
--- a/examples/options-wheelPropagation.html
+++ b/examples/options-wheelPropagation.html
@ -6,7 +6,7 @@
    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
    <script src="../dist/js/perfect-scrollbar.js"></script>
    <style>
-      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
+      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
      .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
      .spacer { text-align:center }
    </style>
--- a/examples/options-wheelSpeed.html
+++ b/examples/options-wheelSpeed.html
@ -6,7 +6,7 @@
    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
    <script src="../dist/js/perfect-scrollbar.js"></script>
    <style>
-      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
+      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
      .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
      .spacer { text-align:center }
    </style>
--- a/examples/reach-the-end-callback.html
+++ b/examples/reach-the-end-callback.html
@ -10,7 +10,7 @@
        border: 1px solid gray;
        height:150px;
        width: 400px;
-        overflow: hidden;
+        overflow: auto;
        position: relative;
      }
      #status { color: red; }
--- a/examples/removable-list-element.html
+++ b/examples/removable-list-element.html
@ -10,7 +10,7 @@
        border: 1px solid gray;
        max-height: 300px;
        width: 400px;
-        overflow: hidden;
+        overflow: auto;
        position: relative;
      }
      #test .element {
--- a/examples/rtl.html
+++ b/examples/rtl.html
@ -6,7 +6,7 @@
    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
    <script src="../dist/js/perfect-scrollbar.js"></script>
    <style>
-      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
+      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
      .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
      .spacer { text-align:center }

--- a/examples/scrollbars-on-the-opposite-side.html
+++ b/examples/scrollbars-on-the-opposite-side.html
@ -6,7 +6,7 @@
    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
    <script src="../dist/js/perfect-scrollbar.js"></script>
    <style>
-      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
+      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
      .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
      .spacer { text-align:center }

--- a/examples/scrollbars-with-margin.html
+++ b/examples/scrollbars-with-margin.html
@ -6,7 +6,7 @@
    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
    <script src="../dist/js/perfect-scrollbar.js"></script>
    <style>
-      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
+      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
      .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
      .spacer { text-align:center }

--- a/examples/table-content.html
+++ b/examples/table-content.html
@ -17,7 +17,8 @@
      }
      #table tbody {
        height: 100px;
-        overflow-y: hidden;
+        overflow-y: auto;
+        overflow-x:hidden;
        position: relative;
      }
      #table tbody td, #table thead th {
--- a/examples/text-content.html
+++ b/examples/text-content.html
@ -10,7 +10,7 @@
        border: 1px solid gray;
        height:150px;
        width: 400px;
-        overflow: hidden;
+        overflow: auto;
        position: relative;
      }
    </style>
--- a/src/css/main.scss
+++ b/src/css/main.scss
@ -69,6 +69,8 @@ $ps-bar-hover: #999;
 }

 .ps-container {
+  overflow: hidden !important;
+
  &.ps-active-x > .ps-scrollbar-x-rail,
  &.ps-active-y > .ps-scrollbar-y-rail {
    display: block;