sticky-inside-transform-1.html (727B)
1 <!doctype html> 2 <html reftest-async-scroll> 3 <meta charset="utf-8" /> 4 <style> 5 html, body { margin: 0 } 6 7 #scroll { 8 overflow-y: auto; 9 scrollbar-width: none; 10 height: 100vh; 11 background: green; 12 } 13 #transform { 14 transform: translateX(100%) rotate(90deg); 15 height: 600px; 16 transform-origin: 0% 0%; 17 background: #ff0; 18 } 19 #sticky { 20 position: sticky; 21 top: 0; 22 background: #0ff; 23 height: 100px; 24 } 25 </style> 26 <div id="scroll" 27 reftest-displayport-x="0" reftest-displayport-y="0" 28 reftest-displayport-w="800" reftest-displayport-h="2000" 29 reftest-async-scroll-x="0" reftest-async-scroll-y="300"> 30 <div id="transform"> 31 <div id="sticky"></div> 32 </div> 33 <div id="content" style="height: 2000px"></div> 34 </div> 35 </html>