snapped-scrolled-content-ref.html (1451B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Reference: Snapped rendering of scrolled contents</title> 4 5 <style> 6 7 body { 8 margin: 0; 9 padding: 60px; 10 font-size: 24px; 11 } 12 13 #scrollArea { 14 width: 360px; 15 scrollbar-width: none; 16 background: white; 17 outline: 1px solid black; 18 } 19 20 #line { 21 height: 1px; 22 background-color: black; 23 margin-bottom: -1px; /* so that the top borders of the boxes cover the line */ 24 } 25 26 #boxWrapper { 27 display: flex; 28 flex-flow: row nowrap; 29 justify-content: space-around; 30 } 31 32 #boxWrapper > div { 33 width: 60px; 34 height: 60px; 35 box-sizing: border-box; 36 } 37 38 #box1 { 39 border: 1px solid red; 40 } 41 42 #box2 { 43 border: 1px solid green; 44 } 45 46 #box3 { 47 border: 1px solid blue; 48 } 49 50 </style> 51 52 <div id="scrollArea" style="height: 192px;"> 53 <div id="scrolledContent"> 54 <div id="topSpacer" style="height: 96px;"></div> 55 <div id="line"></div> 56 <div id="boxWrapper"> 57 <div id="box1"></div> 58 <div id="box2"></div> 59 <div id="box3"></div> 60 </div> 61 </div> 62 </div> 63 64 <script> 65 66 const topSpacer = document.getElementById("topSpacer"); 67 const offset = new URLSearchParams(location.search).get("offset") ?? 0; 68 topSpacer.style.height = (96 - parseFloat(offset)) + "px"; 69 70 const text = new URLSearchParams(location.search).get("text") ?? null; 71 if (text) { 72 box1.innerText = "text"; 73 box2.innerText = "text"; 74 box3.innerText = "text"; 75 } 76 77 </script>