🐛(component): 修复 scroll 组件无法监听 subtree 的节点变化

package/component/src/component/scroll/index.less

@@ -6,7 +6,6 @@
 .layui-scroll-y {
   position: relative;
   height: 100%;
-
   .layui-scroll-wrap {
     height: 100%;
     overflow-y: scroll;

package/component/src/component/scroll/index.vue

@@ -12,7 +12,7 @@
         ref="barRef"
         class="layui-scroll-track"
         :style="{
-          backgroundColor: data.heightPre == 1 ? 'rgba(0,0,0,0)' : trackColor,
+          backgroundColor: data.heightPre == 1 ? 'transparent' : trackColor,
         }"
       >
         <div
@@ -20,7 +20,7 @@
             height: data.barHeight + 'px',
             width: thumbWidth + 'px',
             transform: 'translateY(' + data.translateY + 'px)',
-            backgroundColor: data.heightPre == 1 ? 'rgba(0,0,0,0)' : thumbColor,
+            backgroundColor: data.heightPre == 1 ? 'transparent' : thumbColor,
           }"
           class="layui-scroll-thumb"
           @mousedown.stop.prevent="moveStart"
@@ -101,22 +101,16 @@ const monitorWindow = function () {
 //监听内容元素尺寸变化
 const monitorScrollBar = function () {
   // @ts-ignore
-  var monitorUl = scrollRef.value;
+  let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
-  let MutationObserver =
+  const observer : any = new MutationObserver(mutations => {
-    window.MutationObserver ||
+      initScrollListner();
-    // @ts-ignore
+  })
-    window.WebKitMutationObserver ||
+
-    // @ts-ignore
+  observer.observe(scrollRef.value, {
-    window.MozMutationObserver;
-  let observer = new MutationObserver((mutations) => {
-    initScrollListner();
-  });
-  if (monitorUl) {
-    observer.observe(monitorUl, {
       attributes: true,
       childList: true,
-    });
+      subtree: true
-  }
+  })
 };
 
 // 初始化延迟监听滚动条
@@ -143,9 +137,7 @@ const initScrollListner = function () {
     wrapContentHeight = scroll.scrollHeight;
     wrapHeight = scroll.clientHeight;
     trackHeight = bar.clientHeight;
-    // 容器高度 / 内容高度   100 150
     data.heightPre = wrapHeight / wrapContentHeight;
-    // 滑动块的高度 根据 容器和内容的比  乘以 滚动轨道 计算出 滑动块的高度
     data.barHeight = data.heightPre * trackHeight;
   }
 };
@@ -213,6 +205,4 @@ const moveEnd = function () {
     }
   };
 };
-
-let dataRef = toRefs(data);
 </script>

package/document-component/src/document/zh-CN/components/scroll.md

@@ -15,32 +15,33 @@
 <template>
   <lay-button @click="changeTotal">修改数据</lay-button>
   <lay-button @click="changeMaxTotal">修改数据</lay-button>
-  <lay-scroll height="200px" style="background-color:whitesmoke;height: calc(100% - 62px);">
+  <lay-scroll height="200px" style="background-color: whitesmoke" thumbColor="#000000">
-    <lay-panel v-for="(n,index) in total" :key="n" style="margin:10px;padding:10px;">内容</lay-panel>
+    <lay-container>
+      <lay-row>
+      <lay-col span="24">
+    <lay-panel
+      v-for="(n, index) in total"
+      :key="n"
+      style="margin: 10px; padding: 10px"
+      >内容</lay-panel
+    >
+        </lay-col>  
+      </lay-row>
+    </lay-container>
   </lay-scroll>
 </template>
 
-<script>
+<script lang="ts" setup>
 import { ref } from 'vue'
 
-export default {
+const total = ref(50)
-  setup() {
-    const total = ref(50);
 
-    const changeTotal = () => {
+const changeTotal = () => {
-      total.value = 2;
+  total.value = 2
-    }
+}
 
-    const changeMaxTotal = () => {
+const changeMaxTotal = () => {
-      total.value = 50;
+  total.value = 50
-    }
-
-    return {
-      total, 
-      changeTotal,
-      changeMaxTotal
-    }
-  }
 }
 </script>