iframe-scrollbar-child.html (886B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 body.scrollable { 6 width: 200lvw; 7 height: 200lvh; 8 } 9 10 div { 11 width: 200px; 12 height: 200px; 13 background-color: skyblue; 14 } 15 16 ::view-transition-new(*) { 17 animation-duration: 30s; 18 opacity: 0; 19 } 20 ::view-transition-old(*) { 21 animation: unset; 22 opacity: 1; 23 } 24 */ 25 </style> 26 <script> 27 function startTransition() { 28 window.transition = document.startViewTransition(() => { 29 document.body.classList.toggle('scrollable'); 30 }); 31 } 32 33 onload = () => { 34 const params = new URLSearchParams(window.location.search); 35 if (params.has('scrollbar')) { 36 document.body.classList.add('scrollable'); 37 } 38 } 39 </script> 40 </head> 41 <body> 42 <div></div> 43 </body> 44 </html>