spinpx · January 22, 2016 15:26 · Jan 22, 2016 · Apr 18, 2015 · Apr 14, 2015 · Apr 14, 2015
diff --git a/nextEvent.org b/nextEvent.org
@@ -42,6 +42,8 @@ $(document).keydown(function(e) {
 #+END_SRC
 
 * Mobile Touch Event
+- touchstart
+- touchmove
 
 * Windows Scroll Bar
 + this method can be use dependent rather than above three method which usually use together to deal with different part behavior.

diff --git a/nextEvent.org b/nextEvent.org
@@ -66,3 +66,7 @@ var scrollNext = function() {
 $(window).scroll(scrollNext);
 #+END_SRC
 
+* Plugins
++ there are some open source plugins easy to realize the scroll effect.
+  - https://github.com/alvarotrigo/fullPage.js
+  - https://github.com/peachananr/onepage-scroll
diff --git a/nextEvent.org b/nextEvent.org
@@ -27,7 +27,7 @@ $(document).keydown(function(e) {
  - onmousewheel :: IE6/7/8
 
 + you can add event separately by =addEventListener=, or use Jquery's =bind= method.
-+ also you should consider duplicate events. you can use time period to avoid this situation. 
++ also you should consider repeated events. you can use time period to avoid this situation. 
 
 #+BEGIN_SRC js
  $(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) {
@@ -46,13 +46,13 @@ $(document).keydown(function(e) {
 * Windows Scroll Bar
 + this method can be use dependent rather than above three method which usually use together to deal with different part behavior.
 + If you are not a height 100% page. Key down/up, Mouse wheel, touch Down/up all can be convert to scroll the window.
-+ I use Jquery's =scrollTop= method to realize the effect.Addtionally, Jquery provide =scroll=, =scrollLeft=.
++ I use Jquery's =scrollTop= method to realize the effect. Addtionally, Jquery provide =scroll=, =scrollLeft=.
  - obj.scrollTop() :: just return the vertical position of the scroll bar
  - obj.scrollLeft() :: return the horizontal position of the scroll bar
  - obj.scroll(func) :: the same as  obj.bind('scroll'), trigger when you scroll
 #+BEGIN_SRC js
+var oldPos = $(window).scrollTop;
 var scrollNext = function() {
-  var oldPos = 0;
   var pos = $(window).scrollTop();
   if (pos >  oldPos) {
       //next

diff --git a/nextEvent.org b/nextEvent.org
@@ -1,6 +1,6 @@
 #+TITLE: scroll events under Javascript 
 
-+ Recently, I wrote an single page site like slides. It involes some keyboard，mouse wheel events.
++ Recently, I wrote an single page site like slides. It involves some keyboard，mouse wheel events.
 + Depend on Jquery.
 + once you have binded the event, remains is easy. just needs margin or padding the content area 100%, or jump to the target anchors.
 

diff --git a/nextEvent.org b/nextEvent.org
@@ -1,8 +1,8 @@
 #+TITLE: scroll events under Javascript 
 
-+ Recently, I write an single page site like slides. It use some keyboard，mouse wheel events.
-+ And I use Jquery as my tool.
-+ once you have bind the event, remain things is easy. you just margin or padding the content area 100%, or go to target anchor.
++ Recently, I wrote an single page site like slides. It involes some keyboard，mouse wheel events.
++ Depend on Jquery.
++ once you have binded the event, remains is easy. just needs margin or padding the content area 100%, or jump to the target anchors.
 
 * Keyboard Event
 #+BEGIN_SRC js
@@ -17,7 +17,7 @@ $(document).keydown(function(e) {
 })
 #+End_Src
 
-+ notice that do not bind keyboard event once you are in input area
++ notice that do not bind keyboard event while you are in input area
 + Jquery also provide =keypress=, =keyup=, =focusout= these related methods.
 
 * Mouse Wheel Event

diff --git a/nextEvent.org b/nextEvent.org
@@ -0,0 +1,68 @@
+#+TITLE: scroll events under Javascript 
+
++ Recently, I write an single page site like slides. It use some keyboard，mouse wheel events.
++ And I use Jquery as my tool.
++ once you have bind the event, remain things is easy. you just margin or padding the content area 100%, or go to target anchor.
+
+* Keyboard Event
+#+BEGIN_SRC js
+$(document).keydown(function(e) {
+   var tag = e.target.tagName.toLowerCase();
+   switch(e.which) {
+     case 38:
+       if (tag != 'input' && tag != 'textarea') goPrev();
+       break;
+     default: return;
+   }
+})
+#+End_Src
+
++ notice that do not bind keyboard event once you are in input area
++ Jquery also provide =keypress=, =keyup=, =focusout= these related methods.
+
+* Mouse Wheel Event
++ There are three mouse wheel event in general:
+ - mousewheel :: IE9,Chrome,Safari,Opera
+ - DOMMousescroll :: Firefox
+ - onmousewheel :: IE6/7/8
+
++ you can add event separately by =addEventListener=, or use Jquery's =bind= method.
++ also you should consider duplicate events. you can use time period to avoid this situation. 
+
+#+BEGIN_SRC js
+ $(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) {
+   event.preventDefault();
+   var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
+   if (delta < 0) { 
+     //down
+   } else {
+     //up
+   }
+ });
+#+END_SRC
+
+* Mobile Touch Event
+
+* Windows Scroll Bar
++ this method can be use dependent rather than above three method which usually use together to deal with different part behavior.
++ If you are not a height 100% page. Key down/up, Mouse wheel, touch Down/up all can be convert to scroll the window.
++ I use Jquery's =scrollTop= method to realize the effect.Addtionally, Jquery provide =scroll=, =scrollLeft=.
+ - obj.scrollTop() :: just return the vertical position of the scroll bar
+ - obj.scrollLeft() :: return the horizontal position of the scroll bar
+ - obj.scroll(func) :: the same as  obj.bind('scroll'), trigger when you scroll
+#+BEGIN_SRC js
+var scrollNext = function() {
+  var oldPos = 0;
+  var pos = $(window).scrollTop();
+  if (pos >  oldPos) {
+      //next
+  } 
+  if (pos >  oldPos) {
+      //prev
+  }
+  oldPos = pos;
+}
+
+$(window).scroll(scrollNext);
+#+END_SRC
+