tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

add-background-attachment-fixed-during-smooth-scroll.html (1252B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3 <title>Add background-attachment:fixed during smooth scroll</title>
      4 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dictdef-scrolltooptions">
      5 <link rel="match" href="add-background-attachment-fixed-during-smooth-scroll-ref.html">
      6 <meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-27000">
      7 <script src="/common/reftest-wait.js"></script>
      8 <style>
      9 #container {
     10  width: 200px;
     11  height: 200px;
     12  overflow: scroll;
     13  background: linear-gradient(green, blue);
     14  will-change: scroll-position;
     15 }
     16 #content {
     17  width: 7500px;
     18  height: 7500px;
     19 }
     20 </style>
     21 <script>
     22 function startSmoothScroll() {
     23  var scrollToOptions = {behavior: "smooth", top: 6000};
     24  container.scrollTo(scrollToOptions);
     25  requestAnimationFrame(preventCompositedScrolling);
     26 }
     27 
     28 function preventCompositedScrolling() {
     29  container.style.backgroundAttachment = "fixed";
     30  requestAnimationFrame(waitForSmoothScrollEnd);
     31 }
     32 
     33 function waitForSmoothScrollEnd() {
     34  if (container.scrollTop == 6000) {
     35    takeScreenshot();
     36  } else {
     37    window.requestAnimationFrame(waitForSmoothScrollEnd);
     38  }
     39 }
     40 
     41 onload = () => {
     42  requestAnimationFrame(startSmoothScroll);
     43 }
     44 </script>
     45 <div id="container">
     46  <div id="content">Content</div>
     47 </div>