From d58e109d98e82f66410b89b517412960fd0eaaee Mon Sep 17 00:00:00 2001
From: Hyunje Alex Jun <me@noraesae.net>
Date: Tue, 21 Jan 2014 11:53:32 +0900
Subject: [PATCH] Add an example about the callback to check if it reaches the
 end.

---
 examples/reach-the-end-callback.html | 57 ++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 examples/reach-the-end-callback.html
diff --git a/examples/reach-the-end-callback.html b/examples/reach-the-end-callback.html
new file mode 100644
index 0000000..6e7e9bf
--- /dev/null
+++ b/examples/reach-the-end-callback.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+
+    <title>perfect-scrollbar example</title>
+    <link href="../src/perfect-scrollbar.css" rel="stylesheet">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+    <script src="../src/jquery.mousewheel.js"></script>
+    <script src="../src/perfect-scrollbar.js"></script>
+    <style>
+      #description {
+        border: 1px solid gray;
+        height:150px;
+        width: 400px;
+        overflow: hidden;
+        position: relative;
+      }
+      #status {
+        color: red;
+      }
+    </style>
+    <script type="text/javascript">
+      $(document).ready(function ($) {
+        var $container = $('#description');
+        var $status = $('#status');
+        $container.perfectScrollbar();
+        $container.scroll(function(e) {
+          if($container.scrollTop() === 0) {
+            $status.text('it reaches the top!');
+          }
+          else if ($container.scrollTop() === $container.prop('scrollHeight') - $container.height()) {
+            $status.text('it reaches the end!');
+          } else {
+            $status.text('');
+          }
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div id="description" class="wrapper">
+      <p>Hello, world! 0</p>
+      <p>Hello, world! 1</p>
+      <p>Hello, world! 2</p>
+      <p>Hello, world! 3</p>
+      <p>Hello, world! 4</p>
+      <p>Hello, world! 5</p>
+      <p>Hello, world! 6</p>
+      <p>Hello, world! 7</p>
+      <p>Hello, world! 8</p>
+      <p>Hello, world! 9</p>
+    </div>
+    <div id="status">
+    </div>
+  </body>
+</html>
