Merge branch 'master' of github.com:lefex/FE

ty-122 · Oct 31, 2021 · ab63e40 · ab63e40
2 parents 98036b5 + 4ed9d22
commit ab63e40
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 11 deletions.
diff --git a/dom-demo/1-mouse-event.ts b/dom-demo/1-mouse-event.ts
@@ -1,4 +1,9 @@
-const run = function () {
+/**
+ * @author 素燕（我有个公众号：素燕）
+ * @description 鼠标事件
+ */
+
+(function () {
     let rootEl = document.querySelector('.sy-dom-app') as HTMLElement;
     if (!rootEl) {
         return;
@@ -143,5 +148,4 @@ const run = function () {
         // 阻止鼠标右键
         // e.preventDefault();
     })
-};
-run();
+}());
diff --git a/dom-demo/2-keyboard-event.ts b/dom-demo/2-keyboard-event.ts
@@ -1,4 +1,9 @@
-const run2 = function () {
+/**
+ * @author 素燕（我有个公众号：素燕）
+ * @description 键盘事件
+ */
+
+(function() {
     let rootEl = document.querySelector('.sy-dom-app') as HTMLElement;
     if (!rootEl) {
         return;
@@ -25,5 +30,4 @@ const run2 = function () {
     document.addEventListener('keyup', (e) => {
         log('keyup', e);
     });
-};
-run2();
+}());
diff --git a/dom-demo/3-page-event.ts b/dom-demo/3-page-event.ts
@@ -1,4 +1,9 @@
-const run3 = function () {
+/**
+ * @author 素燕（我有个公众号：素燕）
+ * @description 页面事件
+ */
+
+(function () {
     let rootEl = document.querySelector('.sy-dom-app') as HTMLElement;
     if (!rootEl) {
         return;
@@ -28,5 +33,4 @@ const run3 = function () {
     window.addEventListener('hashchange', e => {
         log('hashchange', e);
     })
-};
-run3();
+}());
diff --git a/dom-demo/4-intersection-observer.ts b/dom-demo/4-intersection-observer.ts
@@ -0,0 +1,105 @@
+/**
+ * @author 素燕（我有个公众号：素燕）
+ * @description 相交事件
+ */
+
+(function() {
+    const width = 1000;
+    const height = 600;
+    const count = 20;-
+    const pageSelector = 'sypage';
+    const rootSelector = 'syroot';
+    const datas = [];
+    for (let i = 0; i < count; i++) {
+        datas.push({
+            text: `第${i + 1}页`,
+            rendered: false
+        })
+    }
+    let rootEl = document.querySelector('.sy-dom-app') as HTMLElement;
+    if (!rootEl) {
+        return;
+    }
+
+    const intersectionObeserver = new IntersectionObserver(entries => {
+        // entries 多个元素
+        // console.log('observer is called', entries.length, entries);
+        entries.forEach(entry => {
+            let pageIndex = entry.target.id.split('-')[1];
+            if (entry.isIntersecting) {
+                console.log('page appear', pageIndex, entry.intersectionRatio);
+            }
+            else {
+                console.log('page disappear', pageIndex, entry.intersectionRatio);
+            }
+        });
+    }, {
+        // top right bottom left
+        /**
+         * 正数
+         * 元素出现：比提前要早 200px 时触发监听
+         * 元素消失：比提前要晚 200px 时触发监听
+        */
+        // rootMargin: `0px 0px 200px 0px`,
+        /**
+         * 负数
+         * 元素出现：比提前要晚 200px 时触发监听
+         * 元素消失：比提前要晚 200px 时触发监听
+        */
+        // rootMargin: `0px 0px -200px 0px`,
+
+        /**
+         * 正数
+         * 元素出现：比提前要早 200px 时触发监听
+         * 元素消失：比提前要晚 200px 时触发监听
+        */
+        rootMargin: `-400px 0px 0px 0px`,
+        // root: document.getElementById(rootSelector),
+        // 表示在哪些比例的情况下触发回调，可设置多个值，多个值触发多次回调
+        threshold: [0],
+        // 相交的根元素
+        root: null
+    });
+    console.log('intersectionObeserver = ', intersectionObeserver);
+
+    const createParentEl = () => {
+        let parentEl = document.createElement('div');
+        parentEl.id = `${rootSelector}`;
+        parentEl.style.width = '100%';
+        parentEl.style.height = `700px`;
+        parentEl.style.border = '2px solid red';
+        parentEl.style.overflowY = 'scroll';
+        return parentEl;
+    }
+
+    const createChildren = () => {
+        // let parentEl = createParentEl();
+        let parentEl = null;
+        parentEl && rootEl.appendChild(parentEl);
+        for(let i = 0; i < datas.length; i++) {
+            let pageEl = document.createElement('div');
+            pageEl.id = `${pageSelector}-${i + 1}`;
+            pageEl.style.width = `${width}px`;
+            pageEl.style.height = `${height}px`;
+            pageEl.style.border = '2px solid green';
+            pageEl.style.position = 'relative';
+            pageEl.style.margin = '20px';
+            pageEl.style.textAlign = 'center';
+            pageEl.style.fontSize = '30px';
+            pageEl.innerText = datas[i].text;
+
+            if (parentEl) {
+                parentEl.appendChild(pageEl);
+            }
+            else {
+                rootEl.appendChild(pageEl);
+            }
+
+            intersectionObeserver.observe(pageEl);
+        }
+    };
+
+    createChildren();
+
+
+}());
diff --git a/dom-demo/5-get-bound-rect.ts b/dom-demo/5-get-bound-rect.ts
diff --git a/dom-demo/index.css b/dom-demo/index.css
@@ -4,7 +4,7 @@ body {
 }
 
 .sy-dom-app {
-    width: 600px;
+    width: 100%;
     height: 1200px;
     overflow: scroll;
     background-color: #fff;

diff --git a/dom-demo/index.html b/dom-demo/index.html
@@ -12,6 +12,7 @@ <h1>和素燕一起学前端</h1>
     <div class="sy-dom-app" id='sy-dom-app'></div>
     <!-- <script src="./1-mouse-event.ts" type="module"></script> -->
     <!-- <script src="./2-keyboard-event.ts" type="module"></script> -->
-    <script src="./3-page-event.ts" type="module"></script>
+    <!-- <script src="./3-page-event.ts" type="module"></script> -->
+    <script src="./4-intersection-observer.ts" type="module"></script>
 </body>
 </html>