diff --git a/examples/events.html b/examples/events.html
index 6de5cff..3f8806f 100644
--- a/examples/events.html
+++ b/examples/events.html
@@ -35,10 +35,13 @@
 <p><strong>Axis</strong> <span id="axis">&hellip;</span></p>
 
 <p><strong>Direction</strong> <span id="direction">&hellip;</span></p>
+
+<p><strong>Start / End</strong> <span id="start-end">(scroll to the start or end of an axis)</span></p>
 <script>
     var container = document.querySelector('.container')
             , axis = document.getElementById('axis')
-            , direction = document.getElementById('direction');
+            , direction = document.getElementById('direction')
+            , startEnd = document.getElementById('start-end');
     Ps.initialize(container);
 
     document.addEventListener('ps-scroll-y', function () {
@@ -65,6 +68,22 @@
         direction.innerHTML = 'right';
     });
 
+    document.addEventListener('ps-y-reach-start', function () {
+        startEnd.innerHTML = 'Reached start of <em>Y-Axis</em>';
+    });
+
+    document.addEventListener('ps-y-reach-end', function () {
+        startEnd.innerHTML = 'Reached end of <em>Y-Axis</em>';
+    });
+
+    document.addEventListener('ps-x-reach-start', function () {
+        startEnd.innerHTML = 'Reached start of <em>X-Axis</em>';
+    });
+
+    document.addEventListener('ps-x-reach-end', function () {
+        startEnd.innerHTML = 'Reached end of <em>X-Axis</em>'
+    });
+
 </script>
 </body>
 </html>
diff --git a/examples/reach-the-end-callback.html b/examples/reach-the-end-callback.html
deleted file mode 100644
index 1dcc702..0000000
--- a/examples/reach-the-end-callback.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8">
-    <title>perfect-scrollbar example</title>
-    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
-    <script src="../dist/js/perfect-scrollbar.js"></script>
-    <style>
-      #description {
-        border: 1px solid gray;
-        height:150px;
-        width: 400px;
-        overflow: auto;
-        position: relative;
-      }
-      #status { color: red; }
-    </style>
-  </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>
-    <script type="text/javascript">
-      var $ = document.querySelector.bind(document);
-      window.onload = function () {
-        var container = $('#description');
-        var stat = $('#status');
-        Ps.initialize(container);
-        container.addEventListener('scroll', function (e) {
-          if(container.scrollTop === 0) {
-            stat.innerHTML = 'it reaches the top!';
-          }
-          else if (container.scrollTop === container.scrollHeight - container.clientHeight) {
-            stat.innerHTML = 'it reaches the end!';
-          } else {
-            stat.innerHTML = '';
-          }
-        });
-      };
-    </script>
-  </body>
-</html>
