Fix multiple-views-items examples

greggman · greggman · commit 9651f2539e6c · 2022-10-04T14:42:39.000-07:00
I have no idea when this broke or why it broke. If you run the
examples outside the editor they work. If you export them to
jsfiddle, codepen, jsgist, stackoverflow, they all work.
But for some reason they don't work in these iframes.

To see the issue, reset to the previous version of this
repo, build, view the webgl/lessons/webgl-multiple-views.html
lesson. Scroll down to the last two examples. In the example
itself, scroll down. Eventually the 3D stuff will disappear.

The issue is the browser stops updating window.scrollY at
some point. I don't know why. As it says above, outside an
iframe and even inside an iframe on all those sites it works
fine.

Here it's an iframe in an iframe but I'm not convinced that's
it as I think stackoverflow's snippet editor is an iframe in
an iframe.

I was able to repo at least one issue in an iframe
but it didn't lead to what the problem is.

Using an outer div and scrolling inside that seems to fix
the issue.
diff --git a/webgl/lessons/ko/webgl-multiple-views.md b/webgl/lessons/ko/webgl-multiple-views.md
@@ -358,16 +358,24 @@ function render() {
 
 ```html
 <body>
-  <canvas id="canvas"></canvas>
-  <div id="content"></div>
+  <div id="outer">
+    <canvas id="canvas"></canvas>
+    <div id="content"></div>
+  </div>
 </body>
 ```
 
 다음은 CSS입니다.
 
 ```css
-body {
+html, body {
   margin: 0;
+  height: 100%;
+}
+#outer {
+  position: absolute;
+  height: 100%;
+  overflow: auto;
 }
 #content {
   margin: 10px;
@@ -478,6 +486,8 @@ for (let i = 0; i < numItems; ++i) {
 그렇다면 뷰포트와 시저가 일치하도록 설정한 다음 해당 객체를 그립니다.
 
 ```js
+const outerElem = document.querySelector('#outer');
+
 function render(time) {
   time *= 0.001;  // 초 단위로 변환
 
@@ -488,7 +498,7 @@ function render(time) {
   gl.enable(gl.SCISSOR_TEST);
 
   // 캔버스를 현재 스크롤 위치의 상단으로 이동
-  gl.canvas.style.transform = `translateY(${window.scrollY}px)`;
+  gl.canvas.style.transform = `translateY(${outerElem.scrollTop}px)`;
 
   for (const {bufferInfo, element, color} of items) {
     const rect = element.getBoundingClientRect();
@@ -544,7 +554,7 @@ requestAnimationFrame(render);
 코드에서 한 가지 더 주목할 만한 점은 이 라인으로 캔버스를 움직이고 있다는 겁니다.
 
 ```js
-gl.canvas.style.transform = `translateY(${window.scrollY}px)`;
+gl.canvas.style.transform = `translateY(${outerElem.scrollTop}px)`;
 ```
 
 대신 캔버스를 `position: fixed;`로 설정할 수 있는데, 이 경우에는 페이지에 따라 스크롤되지 않습니다.
@@ -570,13 +580,13 @@ gl.canvas.style.transform = `translateY(${window.scrollY}px)`;
 가로 스크롤을 처리하고 싶다면 이 라인을 바꾸면 되는데요.
 
 ```js
-gl.canvas.style.transform = `translateY(${window.scrollY}px)`;
+gl.canvas.style.transform = `translateY(${outerElem.scrollTop}px)`;
 ```
 
 이렇게 변경합니다.
 
 ```js
-gl.canvas.style.transform = `translateX(${window.scrollX}px) translateY(${window.scrollY}px)`;
+gl.canvas.style.transform = `translateX(${outerElem.scrollLeft}px) translateY(${outerElem.scrollTop}px)`;
 ```
 
 {{{example url="../webgl-multiple-views-items-horizontal-scrolling.html"}}}
diff --git a/webgl/lessons/webgl-multiple-views.md b/webgl/lessons/webgl-multiple-views.md
@@ -398,16 +398,24 @@ that goes in front. First the HTML
 
 ```html
 <body>
-  <canvas id="canvas"></canvas>
-  <div id="content"></div>
+  <div id="outer">
+    <canvas id="canvas"></canvas>
+    <div id="content"></div>
+  </div>
 </body>
 ```
 
 Then the CSS
 
 ```css
-body {
+html, body {
   margin: 0;
+  height: 100%;
+}
+#outer {
+  position: absolute;
+  height: 100%;
+  overflow: auto;
 }
 #content {
   margin: 10px;
@@ -521,6 +529,8 @@ with the canvas. If it does we set the viewport and scissor to
 match and then draw that object.
 
 ```js
+const outerElem = document.querySelector('#outer');
+
 function render(time) {
   time *= 0.001;  // convert to seconds
 
@@ -531,7 +541,7 @@ function render(time) {
   gl.enable(gl.SCISSOR_TEST);
 
   // move the canvas to top of the current scroll position
-  gl.canvas.style.transform = `translateY(${window.scrollY}px)`;
+  gl.canvas.style.transform = `translateY(${outerElem.scrollTop}px)`;
 
   for (const {bufferInfo, element, color} of items) {
     const rect = element.getBoundingClientRect();
@@ -590,7 +600,7 @@ One other notable thing about the code is we're moving the canvas
 with this line
 
 ```js
-gl.canvas.style.transform = `translateY(${window.scrollY}px)`;
+gl.canvas.style.transform = `translateY(${outerElem.scrollTop}px)`;
 ```
 
 Why? We could instead set the canvas to `position: fixed;` in which case
@@ -618,13 +628,13 @@ faster than we can draw our objects. Because of this we have 2 options.
 If you want to handle horizontal scrolling just change this line
 
 ```js
-gl.canvas.style.transform = `translateY(${window.scrollY}px)`;
+gl.canvas.style.transform = `translateY(${outerElem.scrollTop}px)`;
 ```
 
 to this
 
 ```js
-gl.canvas.style.transform = `translateX(${window.scrollX}px) translateY(${window.scrollY}px)`;
+gl.canvas.style.transform = `translateX(${outerElem.scrollLeft}px) translateY(${outerElem.scrollTop}px)`;
 ```
 
 {{{example url="../webgl-multiple-views-items-horizontal-scrolling.html"}}}
diff --git a/webgl/webgl-multiple-views-items-horizontal-scrolling.html b/webgl/webgl-multiple-views-items-horizontal-scrolling.html
@@ -8,10 +8,16 @@
 <style>
 html, body {
   margin: 0;
-  width: 200%;
   height: 100%;
 }
+#outer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
 #content {
+  width: 200%;
   margin: 10px;
 }
 #canvas {
@@ -38,8 +44,10 @@
 </style>
 </head>
 <body>
-  <canvas id="canvas"></canvas>
-  <div id="content"></div>
+  <div id="outer">
+    <canvas id="canvas"></canvas>
+    <div id="content"></div>
+  </div>
 </body>
 <!--
 for most samples webgl-utils only provides shader compiling/linking and
@@ -162,6 +170,7 @@
   }
 
   const fieldOfViewRadians = degToRad(60);
+  const outerElem = document.querySelector('#outer');
 
   function drawScene(projectionMatrix, cameraMatrix, worldMatrix, bufferInfo) {
     // Clear the canvas AND the depth buffer.
@@ -198,7 +207,7 @@
     gl.enable(gl.SCISSOR_TEST);
 
     // move the canvas to top of the current scroll position
-    gl.canvas.style.transform = `translateX(${window.scrollX}px) translateY(${window.scrollY}px)`;
+    gl.canvas.style.transform = `translateX(${outerElem.scrollLeft}px) translateY(${outerElem.scrollTop}px)`;
 
     for (const {bufferInfo, element, color} of items) {
       const rect = element.getBoundingClientRect();
diff --git a/webgl/webgl-multiple-views-items.html b/webgl/webgl-multiple-views-items.html
@@ -10,6 +10,11 @@
   margin: 0;
   height: 100%;
 }
+#outer {
+  position: absolute;
+  height: 100%;
+  overflow: auto;
+}
 #content {
   margin: 10px;
 }
@@ -37,8 +42,10 @@
 </style>
 </head>
 <body>
-  <canvas id="canvas"></canvas>
-  <div id="content"></div>
+  <div id="outer">
+    <canvas id="canvas"></canvas>
+    <div id="content"></div>
+  </div>
 </body>
 <!--
 for most samples webgl-utils only provides shader compiling/linking and
@@ -161,6 +168,7 @@
   }
 
   const fieldOfViewRadians = degToRad(60);
+  const outerElem = document.querySelector('#outer');
 
   function drawScene(projectionMatrix, cameraMatrix, worldMatrix, bufferInfo) {
     // Clear the canvas AND the depth buffer.
@@ -197,7 +205,7 @@
     gl.enable(gl.SCISSOR_TEST);
 
     // move the canvas to top of the current scroll position
-    gl.canvas.style.transform = `translateY(${window.scrollY}px)`;
+    gl.canvas.style.transform = `translateY(${outerElem.scrollTop}px)`;
 
     for (const {bufferInfo, element, color} of items) {
       const rect = element.getBoundingClientRect();
