Selaa lähdekoodia

better synchronized scrolling

moving the canvas each frame inside rAF
means the browser will scroll the canvas with
the rest of the page even if we don't get
a chance to update it. This removes the
bounce that was there before where our
canvas update was behind the page update.
Gregg Tavares 7 vuotta sitten
vanhempi
commit
8abb7c805d
1 muutettua tiedostoa jossa 7 lisäystä ja 5 poistoa
  1. 7 5
      examples/webgl_multiple_elements.html

+ 7 - 5
examples/webgl_multiple_elements.html

@@ -16,19 +16,19 @@
 				font-size:13px;
 
 				background-color: #fff;
-				margin: 0px;
+				margin: 0;
 			}
 
 			#info {
 				position: absolute;
-				top: 0px; width: 100%;
+				top: 0; width: 100%;
 				padding: 5px;
 				text-align:center;
 			}
 
 			#content {
 				position: absolute;
-				top: 0px; width: 100%;
+				top: 0; width: 100%;
 				z-index: 1;
 				padding: 3em 0 0 0;
 			}
@@ -38,8 +38,8 @@
 			}
 
 			#c {
-				position: fixed;
-				left: 0px;
+				position: absolute;
+				left: 0;
 				width: 100%;
 				height: 100%;
 			}
@@ -187,6 +187,8 @@
 
 				updateSize();
 
+				canvas.style.transform = `translateY(${window.scrollY}px)`;
+
 				renderer.setClearColor( 0xffffff );
 				renderer.setScissorTest( false );
 				renderer.clear();