From 48eb80bd7f3ed3a073ed0fe42762417fa8e90d7b Mon Sep 17 00:00:00 2001 From: Hyunje Alex Jun Date: Mon, 26 Jan 2015 16:32:33 +0000 Subject: [PATCH] Rewrite examples with a native JavaScript version. --- examples/always-visible.html | 46 ++++++++--------- examples/iframe-content.html | 4 +- examples/iframe.html | 33 +++++------- examples/jquery.html | 40 +++++++++++++++ examples/options-default.html | 44 ++++++++-------- examples/options-minScrollbarLength.html | 33 ++++++------ examples/options-suppressScrollAxis.html | 38 +++++++------- examples/options-useBothWheelAxes.html | 37 +++++++------- examples/options-wheelPropagation.html | 35 +++++++------ examples/options-wheelSpeed.html | 35 +++++++------ examples/reach-the-end-callback.html | 45 ++++++++-------- examples/removable-list-element.html | 29 ++++++----- examples/rtl.html | 33 ++++++------ examples/scrollbars-on-the-opposite-side.html | 51 +++++++++---------- examples/scrollbars-with-margin.html | 43 ++++++++-------- examples/text-content.html | 17 +++---- 16 files changed, 294 insertions(+), 269 deletions(-) create mode 100644 examples/jquery.html diff --git a/examples/always-visible.html b/examples/always-visible.html index 8ce8a87..7e0852d 100644 --- a/examples/always-visible.html +++ b/examples/always-visible.html @@ -1,29 +1,22 @@ - + - + perfect-scrollbar example - - - - - - + + + +

Default

@@ -37,5 +30,12 @@
+ diff --git a/examples/iframe-content.html b/examples/iframe-content.html index 7c25a50..8595da8 100644 --- a/examples/iframe-content.html +++ b/examples/iframe-content.html @@ -1,7 +1,7 @@ - + - + perfect-scrollbar example - + + + + diff --git a/examples/jquery.html b/examples/jquery.html new file mode 100644 index 0000000..cf5911c --- /dev/null +++ b/examples/jquery.html @@ -0,0 +1,40 @@ + + + + + perfect-scrollbar example + + + + + + +

Default; wheelSpeed:1

+
+
+
+
+

Fast: wheelSpeed:10

+
+
+
+
+

Slow: wheelSpeed:0.1

+
+
+
+
+ + + + diff --git a/examples/options-default.html b/examples/options-default.html index d80a3f9..188d3a9 100644 --- a/examples/options-default.html +++ b/examples/options-default.html @@ -1,27 +1,15 @@ - + - + perfect-scrollbar example - - - - - + + +
@@ -33,6 +21,20 @@ Height

+ diff --git a/examples/options-minScrollbarLength.html b/examples/options-minScrollbarLength.html index 4d0104e..07ec578 100644 --- a/examples/options-minScrollbarLength.html +++ b/examples/options-minScrollbarLength.html @@ -1,23 +1,15 @@ - + - + perfect-scrollbar example - - - - - + + +

No minimum

@@ -30,5 +22,12 @@
+ diff --git a/examples/options-suppressScrollAxis.html b/examples/options-suppressScrollAxis.html index 1c14fb0..d8cf7b7 100644 --- a/examples/options-suppressScrollAxis.html +++ b/examples/options-suppressScrollAxis.html @@ -1,25 +1,16 @@ - + - + perfect-scrollbar example - - - - - + + +

Default

@@ -37,6 +28,13 @@
+ - diff --git a/examples/options-useBothWheelAxes.html b/examples/options-useBothWheelAxes.html index 1286af1..3c2db25 100644 --- a/examples/options-useBothWheelAxes.html +++ b/examples/options-useBothWheelAxes.html @@ -1,25 +1,16 @@ - + - + perfect-scrollbar example - - - - - + + +

Default.

@@ -37,5 +28,13 @@
+ diff --git a/examples/options-wheelPropagation.html b/examples/options-wheelPropagation.html index 1646ff7..4a394d4 100644 --- a/examples/options-wheelPropagation.html +++ b/examples/options-wheelPropagation.html @@ -1,23 +1,15 @@ - + - + perfect-scrollbar example - - - - - + + +

Default; wheelPropagation:false

@@ -26,7 +18,7 @@

wheelPropagation:true

-
+
@@ -34,6 +26,13 @@ Note
that
there
is
plenty
of
text
after
the
image
to
ensure
that
it
is
possible
to
down
after
the
bottom
of
the
image
has
been
reached
to
enable
the
wheel
propagation
to
be
tested
+ diff --git a/examples/options-wheelSpeed.html b/examples/options-wheelSpeed.html index 616be79..a9d916f 100644 --- a/examples/options-wheelSpeed.html +++ b/examples/options-wheelSpeed.html @@ -1,24 +1,15 @@ - + - + perfect-scrollbar example - - - - - + + +

Default; wheelSpeed:1

@@ -36,6 +27,14 @@
+ diff --git a/examples/reach-the-end-callback.html b/examples/reach-the-end-callback.html index 23fbd6e..a6b7783 100644 --- a/examples/reach-the-end-callback.html +++ b/examples/reach-the-end-callback.html @@ -1,12 +1,10 @@ - + - perfect-scrollbar example - - + -
@@ -52,5 +31,23 @@
+ diff --git a/examples/removable-list-element.html b/examples/removable-list-element.html index 69e46fb..36ffdfd 100644 --- a/examples/removable-list-element.html +++ b/examples/removable-list-element.html @@ -1,12 +1,10 @@ - + - perfect-scrollbar example - - + -
@@ -48,5 +36,18 @@
Hello! Click here to remove this!
Hello! Click here to remove this!
+ diff --git a/examples/rtl.html b/examples/rtl.html index 7cbc0be..8cdde24 100644 --- a/examples/rtl.html +++ b/examples/rtl.html @@ -1,29 +1,28 @@ - + - + perfect-scrollbar example - - - - - + html { direction: rtl; } +
+ diff --git a/examples/scrollbars-on-the-opposite-side.html b/examples/scrollbars-on-the-opposite-side.html index 5bc30e5..ed466f9 100644 --- a/examples/scrollbars-on-the-opposite-side.html +++ b/examples/scrollbars-on-the-opposite-side.html @@ -1,38 +1,37 @@ - + - + perfect-scrollbar example - - - - - + /* Change the alignment of scrollbars */ + /* Recommended: You can just modify the CSS file directly. */ + .ps-container .ps-scrollbar-x-rail { + top: 3px; + bottom: auto; /* If using `top`, there shouldn't be a `bottom`. */ + } + .ps-container .ps-scrollbar-y-rail { + left: 3px; + right: auto; /* If using `left`, there shouldn't be a `right`. */ + } +
+ diff --git a/examples/scrollbars-with-margin.html b/examples/scrollbars-with-margin.html index 50ce9fd..1445023 100644 --- a/examples/scrollbars-with-margin.html +++ b/examples/scrollbars-with-margin.html @@ -1,34 +1,33 @@ - + - + perfect-scrollbar example - - - - - + .ps-scrollbar-x-rail { + margin: 0 3px; + } + .ps-scrollbar-y-rail { + margin: 3px 0; + } +
+ diff --git a/examples/text-content.html b/examples/text-content.html index eefb719..eb8c349 100644 --- a/examples/text-content.html +++ b/examples/text-content.html @@ -1,12 +1,10 @@ - + - perfect-scrollbar example - - + -
@@ -37,5 +30,11 @@

The command takes options applicable

+