测试滚动页面显示元素

 /*
+ * @Date: 2024-07-31 17:19:25
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-09-05 17:08:08
+ * @FilePath: /data-table/src/utils/tools.js
+ * @Description: 文件描述
+ */
+/*
  * @Date: 2022-04-18 15:59:42
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditTime: 2023-02-24 16:13:06
@@ -125,6 +132,69 @@ const stringifyQuery = (params) => {
   return '?' + queryString.join('&');
 };
 
+// 美化打印实现方法
+const prettyLog = () => {
+  const isProduction = import.meta.env.MODE === 'production';
+
+  const isEmpty = (value) => {
+      return value == null || value === undefined || value === '';
+  };
+  const prettyPrint = (title, text, color) => {
+      if (isProduction) return;
+      if (typeof text === 'object') {
+        console.log(
+          `%c ${title} %c`,
+          `background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;`,'background:transparent',
+          text
+        )
+        return
+      }
+      console.log(
+          `%c ${title} %c ${text} %c`,
+          `background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;`,
+          `border:1px solid ${color}; padding: 1px; border-radius: 0 2px 2px 0; color: ${color};`,
+          'background:transparent'
+      );
+  };
+  const info = (textOrTitle, content = '') => {
+      const title = isEmpty(content) ? 'Info' : textOrTitle;
+      const text = isEmpty(content) ? textOrTitle : content;
+      prettyPrint(title, text, '#909399');
+  };
+  const error = (textOrTitle, content = '') => {
+      const title = isEmpty(content) ? 'Error' : textOrTitle;
+      const text = isEmpty(content) ? textOrTitle : content;
+      prettyPrint(title, text, '#F56C6C');
+  };
+  const warning = (textOrTitle, content = '') => {
+      const title = isEmpty(content) ? 'Warning' : textOrTitle;
+      const text = isEmpty(content) ? textOrTitle : content;
+      prettyPrint(title, text, '#E6A23C');
+  };
+  const success = (textOrTitle, content = '') => {
+      const title = isEmpty(content) ? 'Success ' : textOrTitle;
+      const text = isEmpty(content) ? textOrTitle : content;
+      prettyPrint(title, text, '#67C23A');
+  };
+
+  return {
+      info,
+      error,
+      warning,
+      success,
+  };
+};
+
+const isInViewport = (el) => { // 判断元素是否在可视区域
+  const rect = el.getBoundingClientRect();
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+};
+
 export {
   formatDate,
   wxInfo,
@@ -134,4 +204,6 @@ export {
   changeURLArg,
   getUrlParams,
   stringifyQuery,
+  prettyLog,
+  isInViewport,
 };

 <!--
  * @Date: 2024-07-12 13:20:15
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-01 11:51:07
+ * @LastEditTime: 2024-09-05 17:31:02
  * @FilePath: /data-table/src/views/test.vue
  * @Description: 文件描述
 -->
@@ -10,11 +10,17 @@
     <TEditor ref="refEdit" ></TEditor>
     <div @click="getValue">获取内容</div>
     <div @click="setValue">设置内容</div>
+    <div>
+      <ul id="list">
+        <li v-for="(item) in 50" :key="index">Item {{ item }}</li>
+      </ul>
+    </div>
   </div>
 </template>
 
 <script setup>
   import TEditor from "@/components/TEditor/index.vue";
+  import { $ } from "@/utils/generatePackage.js";
 
   const refEdit = ref(null);
 
@@ -55,10 +61,63 @@
     </tbody>
   </table>
   `
+
+  onMounted(() => {
+    $(document).ready(function() {
+      const $listItems = $("#list li");
+
+      // 判断元素是否在可视范围内
+      function isInViewport($el) {
+        const rect = $el[0].getBoundingClientRect();
+        const listRect = $('#list')[0].getBoundingClientRect(); // 获取容器的可视区域
+        return (
+          rect.top >= listRect.top &&
+          rect.bottom <= listRect.bottom
+        );
+      }
+
+      // 检查所有的 li 元素
+      function addVisibilityClass() {
+        $listItems.each(function() {
+          const $this = $(this);
+          if (isInViewport($this) && !$this.hasClass("visible")) {
+            $this.addClass("visible");
+          }
+        });
+      }
+
+      // 监听滚动事件
+      $("#list").on("scroll", function() {
+        addVisibilityClass();
+      });
+
+      // 初次加载时检查可见项
+      addVisibilityClass();
+    });
+  })
 </script>
 
 <style>
 .tinymce-box {
   width: 100%;
 }
+
+ul {
+  height: 200px; /* 可视区域显示5个li */
+  overflow-y: scroll;
+  list-style-type: none;
+  padding: 0;
+  background-color: #eee;
+}
+
+li {
+  height: 40px;
+  margin: 5px 0;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+li.visible {
+  opacity: 1;
+}
 </style>