fix: intersection root margin match top offset (#1)

* fix: intersection root margin match top offset * fix: intersectionObserver will missing match when scroll to fase
opentiny · Dec 20, 2024 · 40f1cf9 · 40f1cf9
1 parent 5a2b193
commit 40f1cf9
Show file tree

Hide file tree

Showing 6 changed files with 175 additions and 188 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -43,6 +43,9 @@
         position: fixed;
         transform: none;
       }
+      .gap {
+        height: 3000px;
+      }
     </style>
   </head>
   <body>
@@ -61,6 +64,7 @@
         <div id="output2"></div>
       </div>
     </div>
+    <div class="gap"></div>
 
     <script src="./index.js"></script>
   </body>

diff --git a/docs/index.js b/docs/index.js
@@ -81,36 +81,29 @@ for (const [i, btn] of [document.getElementById('btn1'), document.getElementById
 
 for (const q of quill) {
   q.setContents([
-    { insert: 'header1' },
+    { insert: 'header 1' },
     { attributes: { header: 1 }, insert: '\n' },
-    { insert: '\n\n\n\n\n\n\n\n\nheader1.1' },
+    { insert: '\n\n\n\n\n\n\n\n\n\nheader 1.1' },
     { attributes: { header: 2 }, insert: '\n' },
-    { insert: '\n\n\n\n\n\n\n\n\n\n\n\n\n\nheader1.2' },
+    { insert: '\n\n\n\n\n\n\n\n\nheader 1.2' },
     { attributes: { header: 2 }, insert: '\n' },
-    { insert: '\n\n\n\n\n\n\n\n\n\n\n\n\nheader1.2.1' },
-    { attributes: { header: 3 }, insert: '\n' },
-    { insert: '\n\n\n\n\n\nheader1.2.2' },
-    { attributes: { header: 3 }, insert: '\n' },
-    { insert: '\n\n\n\n\n\n\n\n\n\nheader2' },
+    { insert: '\n\n\n\nheader 1.3' },
     { attributes: { header: 2 }, insert: '\n' },
-    { insert: '\n\n\nheader2.1' },
+    { insert: '\n\n\n\n\n\n\n\n\n\n\nheader 2' },
+    { attributes: { header: 1 }, insert: '\n' },
+    { insert: '\n\n\n\n\n\n\n\nheader 2.1' },
     { attributes: { header: 2 }, insert: '\n' },
-    { insert: '\n\nheader2.1.1' },
+    { insert: '\nheader 2.1.1' },
     { attributes: { header: 3 }, insert: '\n' },
-    { insert: '\n\n\n\n\n\n\n\n\n\n\n\n\n\nheader2.1.2' },
+    { insert: '\n\n\n\n\n\n\n\n\n\nheader 2.1.2' },
     { attributes: { header: 3 }, insert: '\n' },
-    { insert: '\n\nheader2.1.2.1' },
+    { insert: '\n\n\n\n\n\n\n\n\n\nheader 44444444' },
+    { attributes: { header: 4 }, insert: '\n' },
+    { insert: '\n\n\n\n\n\n\n\n\n\nheader 44444444' },
     { attributes: { header: 4 }, insert: '\n' },
-    { insert: '\n\n\n\n\n\n\n\n\n\n\nheader2.1.2.1.1' },
+    { insert: '\n\n\n\n\n\n\n\n\n\nheader 5' },
     { attributes: { header: 5 }, insert: '\n' },
-    { insert: '\n\nheader2.1.2.1.1.1' },
+    { insert: '\n\n\n\n\n\n\n\n\n\nheader 6' },
     { attributes: { header: 6 }, insert: '\n' },
-    { insert: '\n\n\n\n\n\n\n\nheader3' },
-    { attributes: { header: 2 }, insert: '\n' },
-    { insert: '\n\n\n\nheader3.1' },
-    { attributes: { header: 3 }, insert: '\n' },
-    { insert: '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nheader4' },
-    { attributes: { header: 2 }, insert: '\n' },
-    { insert: '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' },
   ]);
 }