Merge branch 'master' of github.com:9th-js/wcui

src/scroll/index.js

@@ -17,16 +17,19 @@ class Scroll extends Component {
     css`
       :host {
         position: relative;
-        overflow: auto;
+        overflow: hidden;
         display: block;
+      }
+      .scroller {
+        position: relative;
+        height: 100%;
+        width: 100%;
+        overflow: auto;
         &::-webkit-scrollbar {
           display: none;
         }
         scrollbar-width: none; //火狐专属
       }
-      .scroll {
-        position: relative;
-      }
       .scroll-bar {
         position: absolute;
         background: #909399;
@@ -73,11 +76,34 @@ class Scroll extends Component {
       }
     `
   ]
-
+  get scrollTop() {
+    return this.$refs.scroller.scrollTop
+  }
+  set scrollTop(val) {
+    this.$refs.scroller.scrollTop = val
+  }
+  get scrollHeight() {
+    return this.$refs.scroller.scrollHeight
+  }
+  set scrollHeight(val) {
+    this.$refs.scroller.scrollHeight = val
+  }
+  get scrollLeft() {
+    return this.$refs.scroller.scrollLeft
+  }
+  set scrollLeft(val) {
+    this.$refs.scroller.scrollLeft = val
+  }
+  get scrollWidth() {
+    return this.$refs.scroller.scrollWidth
+  }
+  set scrollWidth(val) {
+    this.$refs.scroller.scrollWidth = val
+  }
   render() {
     return html`
-      <div ref="scrollView" class="scroll">
+      <div ref="scroller" class="scroller">
-        <slot></slot>
+        <slot ref="slot"></slot>
       </div>
       <div ref="vertical" class="scroll-bar vertical"></div>
       <div ref="horizon" class="scroll-bar horizon"></div>
@@ -155,15 +181,12 @@ class Scroll extends Component {
     const { vertical, horizon } = this.$refs
     const verticalProgress = scrollTop / (scrollHeight - clientHeight) || 0
     const horizonProgress = scrollLeft / (scrollWidth - clientWidth) || 0
-    vertical.style.top = `${
+    vertical.style.transform = `translateY(${
-      scrollTop + (clientHeight - verticalHeight) * verticalProgress
+      (clientHeight - verticalHeight) * verticalProgress
-    }px`
+    }px)`
-    vertical.style.left = scrollLeft + clientWidth - 8 + 'px'
+    horizon.style.transform = `translateX(${
-    horizon.style.left = `${
+      (clientWidth - horizonWidth) * horizonProgress
-      scrollLeft + (clientWidth - horizonWidth) * horizonProgress
+    }px)`
-    }px`
-    horizon.style.top = scrollTop + clientHeight - 8 + 'px'
-
     if (!ev) {
       //事件对象不存在，则是手动调用的 不触发事件。
       return
@@ -200,17 +223,30 @@ class Scroll extends Component {
       bind(vertical, 'mousedown', this.onmousedown.bind(this))
     }
   }
+  #watchResize() {
+    const slotList = this.$refs.slot.assignedNodes()
+    if (slotList) {
+      slotList.forEach(element => {
+        if (element.nodeType === 1) {
+          this.resizeObserver.observe(element)
+        }
+      })
+    }
+  }
   mounted() {
-    this.initScrollBar()
-
     this.$on('mouseenter', this.onmouseenter)
     this.$on('mouseleave', this.onmouseleave)
-    this.$on('scroll', this.onscroll)
+    this.onscroll = bind(
+      this.$refs.scroller,
+      'scroll',
+      this.onscroll.bind(this)
+    )
     this.resizeObserver = new ResizeObserver(() => {
       this.initScrollBar()
       this.onscroll()
     })
-    this.resizeObserver.observe(this.$refs.scrollView)
+    this.#watchResize()
+    this.$refs.slot.addEventListener('slotchange', () => this.#watchResize())
   }
   unmounted() {
     this.resizeObserver.disconnect()
@@ -223,4 +259,4 @@ class Scroll extends Component {
   }
 }
 
-customElements.define('wc-scroll', Scroll)
+Scroll.reg('scroll')