<!DOCTYPE html> <meta charset="utf-8"> <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring-1/"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <style> #scroller { overflow: scroll; width: 300px; height: 300px; } #before { height: 50px; } #content { margin-top: 100px; margin-bottom: 600px; } .no { overflow-anchor: none; } </style> <div id="scroller"> <div id="before"></div> <div id="content">content</div> </div> <script> // Tests that dynamic styling 'overflow-anchor' on a scrolling element has the // same effect as initial styling test(() => { let scroller = document.querySelector("#scroller"); let before = document.querySelector("#before"); // Scroll down so that #content is the first element in the viewport scroller.scrollTop = 100; // Change the height of #before to trigger a scroll adjustment. This ensures // that #content was selected as a scroll anchor before.style.height = "100px"; assert_equals(scroller.scrollTop, 150); // Now set 'overflow-anchor: none' on #scroller. This should invalidate the // scroll anchor, and #scroller shouldn't be able to select an anchor anymore scroller.className = 'no'; // Change the height of #before and make sure we don't adjust. This ensures // that #content is not a scroll anchor before.style.height = "150px"; assert_equals(scroller.scrollTop, 150); }, "Dynamically styling 'overflow-anchor: none' on the scroller element should prevent scroll anchoring"); </script>