smooth-anchor-scroll-in-snap-container.html (1857B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 5 <title>Smooth anchor scroll in snap container works</title> 6 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/"/> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/dom/events/scrolling/scroll_support.js"></script> 10 </head> 11 <body> 12 <style> 13 div { 14 scroll-behavior: smooth; 15 } 16 .scroller { 17 height: 200px; 18 width: 200px; 19 overflow-x: scroll; 20 scroll-snap-type: x mandatory; 21 border: solid 1px black; 22 background-color: yellow; 23 position: relative; 24 } 25 .snaparea { 26 height: 50px; 27 width: 50px; 28 scroll-snap-align: start; 29 background-color: green; 30 } 31 #target { 32 height: 50px; 33 width: 50px; 34 background-color: green; 35 } 36 .space { 37 height: 200vh; 38 width: 200vw; 39 } 40 </style> 41 <div class="scroller" id="scroller"> 42 <div class="snaparea"><a id="link" href="#target">target</a></div> 43 <div class="space"></div> 44 <div id="target"></div> 45 </div> 46 <script> 47 window.onload = () => { 48 promise_test(async (t) => { 49 await waitForCompositorCommit(); 50 const scroller = document.getElementById("scroller"); 51 const link = document.getElementById("link"); 52 53 const scrollend_promise = waitForScrollendEventNoTimeout(scroller); 54 link.click(); 55 await scrollend_promise; 56 assert_equals(scroller.scrollTop, 57 scroller.scrollHeight - scroller.clientHeight); 58 }, "smooth scroll to anchor link target in snap container works."); 59 } 60 </script> 61 </body> 62 </html>