Update scroll.html

sunnylost · Nov 27, 2013 · 4bfb138 · 4bfb138
1 parent ade382f
commit 4bfb138
Showing 1 changed file with 45 additions and 7 deletions.
diff --git a/test/scroll.html b/test/scroll.html
@@ -112,6 +112,8 @@
         <div id="btn"></div>
 
         <script>
+            //alert(navigator.userAgent);
+            //alert('orientation' in window);
             var $ = function(s) {
                 return document.getElementById(s);
             };
@@ -122,19 +124,17 @@
                 timeOutId;
 
             function hide(el) {
-                //el.style.visibility = 'hidden';
                 el.style.display = 'none';
             }
 
             function show(el) {
-                //el.style.visibility = 'visible';
                 el.style.display = 'block';
             }
 
             function start() {
                 var y = window.scrollY;
                 c.innerHTML = '<p>touch start';
-                if(y != 0 && (y + window.innerHeight) != document.documentElement.scrollHeight) {
+                if(y != 0) {
                     hide(b);
                     b.style.opacity = 0;
                     isAtEdge = false;
@@ -165,6 +165,7 @@
                     clearTimeout(timeOutId)
                     return;
                 }
+                b.style.top = window.scrollY + window.innerHeight / 2 + 'px';
                 showButton();
             }
 
@@ -181,20 +182,57 @@
                 showButton();
             }
 
+            function handler() {
+                if(isAtEdge && window.scrollY == 0) {
+                    hide(b);
+                    b.style.opacity = 0;
+                    clearTimeout(timeOutId)
+                    return;
+                }
+                c.innerHTML += '<p>scroll';
+                c.style.top = window.scrollY + 'px';
+                b.style.top = window.scrollY + window.innerHeight / 2 + 'px';
+                showButton();
+            }
+
             function showButton() {
                 clearTimeout(timeOutId);
                 timeOutId = setTimeout(function() {
+                    if(window.scrollY == 0) return;
                     show(b);
                     setTimeout(function() {
                         b.style.opacity = 1;
                     }, 0)
                 }, 50)
             }
 
-            window.addEventListener('touchstart', start)
-            window.addEventListener('touchmove', move)
-            window.addEventListener('touchend', end)
-            window.addEventListener('scroll', scroll)
+            function orientationFn(e) {
+                checkWindowSize(window.innerWidth, window.innerHeight);
+            }
+
+            function checkWindowSize(w, h) {
+                if(!checkWindowSize.begin) {
+                    checkWindowSize.begin = new Date;
+                }
+
+                var nw = window.innerWidth,
+                    nh = window.innerHeight;
+                if(nw === w && nh === h) {
+                    checkWindowSize.tryTime += 1;
+                    setTimeout(function() {
+                        checkWindowSize(w, h);
+                    }, 0)
+                } else {
+                    alert('window needs "' + (new Date - checkWindowSize.begin) + '"ms to resize.');
+                    checkWindowSize.begin = null;
+                }
+            }
+
+            window.addEventListener('touchstart', start);
+            window.addEventListener('touchmove', handler);
+            window.addEventListener('touchend', handler);
+            window.addEventListener('scroll', handler);
+            window.addEventListener('orientationchange', orientationFn);
 
             c.addEventListener('touchstart', function(e) {
                 e.stopPropagation();