fix(cdk:scroll): turn to native scrollbar (#847)

fix(cdk:scroll): fix VirtualScroll horizontal scroll behavior

fix(comp:table): scrollbar th cell is now visible under virtual mode

fix(comp:table): fix itemHeight calc under virtual

packages/cdk/scroll/__tests__/__snapshots__/virtualScroll.spec.ts.snap

@@ -2,26 +2,20 @@
 
 exports[`VirtualScroll > basic work > itemRender work 1`] = `
 "<div class=\\"cdk-virtual-scroll\\" style=\\"position: relative;\\">
-  <div class=\\"cdk-virtual-scroll-holder\\" style=\\"max-height: 200px; overflow-y: hidden;\\">
-    <div class=\\"cdk-virtual-scroll-filler\\" style=\\"height: 400px; position: relative; overflow: hidden;\\">
+  <div class=\\"cdk-virtual-scroll-holder\\" style=\\"max-height: 200px; overflow: auto;\\">
+    <div class=\\"cdk-virtual-scroll-filler\\" style=\\"height: 400px; position: relative;\\">
       <div class=\\"cdk-virtual-scroll-content\\" style=\\"display: flex; flex-direction: column; transform: translateY(0px); position: absolute; left: 0px; right: 0px; top: 0px;\\"><span class=\\"virtual-item\\">key-0 - 0</span><span class=\\"virtual-item\\">key-1 - 1</span><span class=\\"virtual-item\\">key-2 - 2</span><span class=\\"virtual-item\\">key-3 - 3</span><span class=\\"virtual-item\\">key-4 - 4</span><span class=\\"virtual-item\\">key-5 - 5</span><span class=\\"virtual-item\\">key-6 - 6</span><span class=\\"virtual-item\\">key-7 - 7</span><span class=\\"virtual-item\\">key-8 - 8</span><span class=\\"virtual-item\\">key-9 - 9</span><span class=\\"virtual-item\\">key-10 - 10</span><span class=\\"virtual-item\\">key-11 - 11</span></div>
     </div>
   </div>
-  <div class=\\"cdk-virtual-scroll-bar\\" style=\\"width: 8px; top: 0px; bottom: 0px; right: 0px; position: absolute; display: none;\\">
-    <div class=\\"cdk-virtual-scroll-thumb\\" style=\\"width: 100%; height: 100px; top: 0px; left: 0px; position: absolute; background: rgba(0, 0, 0, 0.5); border-radius: 99px; cursor: pointer; user-select: none;\\"></div>
-  </div>
 </div>"
 `;
 
 exports[`VirtualScroll > basic work > render work 1`] = `
 "<div class=\\"cdk-virtual-scroll\\" style=\\"position: relative;\\">
-  <div class=\\"cdk-virtual-scroll-holder\\" style=\\"max-height: 200px; overflow-y: hidden;\\">
-    <div class=\\"cdk-virtual-scroll-filler\\" style=\\"height: 400px; position: relative; overflow: hidden;\\">
+  <div class=\\"cdk-virtual-scroll-holder\\" style=\\"max-height: 200px; overflow: auto;\\">
+    <div class=\\"cdk-virtual-scroll-filler\\" style=\\"height: 400px; position: relative;\\">
       <div class=\\"cdk-virtual-scroll-content\\" style=\\"display: flex; flex-direction: column; transform: translateY(0px); position: absolute; left: 0px; right: 0px; top: 0px;\\"><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-0 - 0</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-1 - 1</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-2 - 2</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-3 - 3</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-4 - 4</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-5 - 5</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-6 - 6</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-7 - 7</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-8 - 8</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-9 - 9</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-10 - 10</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-11 - 11</span></div>
     </div>
   </div>
-  <div class=\\"cdk-virtual-scroll-bar\\" style=\\"width: 8px; top: 0px; bottom: 0px; right: 0px; position: absolute; display: none;\\">
-    <div class=\\"cdk-virtual-scroll-thumb\\" style=\\"width: 100%; height: 100px; top: 0px; left: 0px; position: absolute; background: rgba(0, 0, 0, 0.5); border-radius: 99px; cursor: pointer; user-select: none;\\"></div>
-  </div>
 </div>"
 `;

packages/cdk/scroll/__tests__/virtualScroll.spec.ts

@@ -170,21 +170,6 @@ describe('VirtualScroll', () => {
   })
 
   describe('scroll work', () => {
-    test('scrollBar show work', async () => {
-      const wrapper = VirtualScrollMount({
-        props: { dataSource: getData(40) },
-        slots: { item: defaultItemSlot },
-      })
-
-      await wrapper.trigger('mouseenter')
-
-      expect(wrapper.find('.cdk-virtual-scroll-bar').isVisible()).toBe(true)
-
-      await wrapper.trigger('mouseleave')
-
-      expect(wrapper.find('.cdk-virtual-scroll-bar').isVisible()).toBe(false)
-    })
-
     test('scrollTo work', async () => {
       vi.useFakeTimers()
 
@@ -193,13 +178,11 @@ describe('VirtualScroll', () => {
         slots: { item: defaultItemSlot },
       })
       expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollTop).toEqual(0)
-      expect(wrapper.find('.cdk-virtual-scroll-bar').attributes('style')).toContain('display: none')
 
       wrapper.vm.scrollTo(100)
       vi.runAllTimers()
 
       expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollTop).toEqual(100)
-      expect(wrapper.find('.cdk-virtual-scroll-thumb').attributes('style')).not.toContain('display: none')
 
       wrapper.vm.scrollTo({ index: 20, align: 'top' })
       vi.runAllTimers()
@@ -233,30 +216,6 @@ describe('VirtualScroll', () => {
       vi.useRealTimers()
     })
 
-    test('moving work', async () => {
-      const wrapper = VirtualScrollMount({
-        props: { dataSource: getData(100) },
-        slots: { item: defaultItemSlot },
-      })
-
-      wrapper.find('.cdk-virtual-scroll-thumb').trigger('mousedown', { pageY: 0 })
-
-      const mouseMoveEvent = new Event('mousemove') as MouseEvent
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ;(mouseMoveEvent as any).pageY = 10
-      window.dispatchEvent(mouseMoveEvent)
-      await flushPromises()
-
-      expect(wrapper.find('.cdk-virtual-scroll-holder').attributes('style')).toContain('pointer-events: none')
-
-      await flushPromises()
-      expect(wrapper.find('.cdk-virtual-scroll-holder').element.scrollTop).toEqual(100)
-
-      const mouseUpEvent = new Event('mouseup') as MouseEvent
-      window.dispatchEvent(mouseUpEvent)
-      await flushPromises()
-    })
-
     test('onScroll work', async () => {
       const onScroll = vi.fn()
       const wrapper = VirtualScrollMount({

packages/cdk/scroll/src/virtual/VirtualScroll.tsx

@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { type ComponentPublicInstance, type WatchStopHandle, computed, defineComponent, provide, ref, watch } from 'vue'
+import { type ComponentPublicInstance, computed, defineComponent, provide, ref, watch } from 'vue'
 
 import { callEmit, useState } from '@idux/cdk/utils'
 
@@ -15,10 +15,8 @@ import { useOriginScroll } from './composables/useOriginScroll'
 import { useScrollPlacement } from './composables/useScrollPlacement'
 import { useScrollState } from './composables/useScrollState'
 import { useScrollTo } from './composables/useScrollTo'
-import { useScrollVisible } from './composables/useScrollVisible'
 import Holder from './contents/Holder'
 import Item from './contents/Item'
-import ScrollBar from './contents/ScrollBar'
 import { virtualScrollToken } from './token'
 import { virtualListProps } from './types'
 
@@ -34,7 +32,6 @@ export default defineComponent({
     const fillerRef = ref<HTMLElement>()
 
     const [scrollTop, changeScrollTop] = useState(0)
-    const [scrollMoving, changeScrollMoving] = useState(false)
     const { scrollHeight, scrollOffset, startIndex, endIndex } = useScrollState(
       props,
       fillerRef,
@@ -44,7 +41,7 @@ export default defineComponent({
       heightsUpdateMark,
       heights,
     )
-    const { scrollVisible, setScrollVisible } = useScrollVisible(props, scrollHeight)
+
     const { scrolledTop, scrolledBottom, syncScrollTop } = useScrollPlacement(
       props,
       holderRef,
@@ -64,47 +61,16 @@ export default defineComponent({
       scrollTop,
       scrollHeight,
       scrollOffset,
-      scrollVisible,
-      setScrollVisible,
-      scrollMoving,
-      changeScrollMoving,
       syncScrollTop,
       originScroll,
     })
 
-    const scrollTo = useScrollTo(props, holderRef, getKey, heights, collectHeights, setScrollVisible, syncScrollTop)
+    const scrollTo = useScrollTo(props, holderRef, getKey, heights, collectHeights, syncScrollTop)
     expose({ scrollTo })
 
     const mergedData = computed(() => props.dataSource.slice(startIndex.value, endIndex.value + 1))
     watch(mergedData, data => callEmit(props.onScrolledChange, startIndex.value, endIndex.value, data))
 
-    let stopWatchScrollMoving: WatchStopHandle | undefined
-
-    const clearWatch = () => {
-      if (stopWatchScrollMoving) {
-        stopWatchScrollMoving()
-        stopWatchScrollMoving = undefined
-      }
-    }
-
-    const handleMouseEnter = () => {
-      clearWatch()
-      if (!scrollMoving.value) {
-        setScrollVisible(true)
-      }
-    }
-
-    const handleMouseLeave = () => {
-      clearWatch()
-      if (!scrollMoving.value) {
-        setScrollVisible(false)
-      } else {
-        stopWatchScrollMoving = watch(scrollMoving, () => {
-          setScrollVisible(false)
-        })
-      }
-    }
-
     return () => {
       const getKeyFn = getKey.value
       const start = startIndex.value
@@ -119,14 +85,8 @@ export default defineComponent({
       })
 
       return (
-        <div
-          class="cdk-virtual-scroll"
-          style={{ position: 'relative' }}
-          onMouseenter={handleMouseEnter}
-          onMouseleave={handleMouseLeave}
-        >
+        <div class="cdk-virtual-scroll" style={{ position: 'relative' }}>
           <Holder>{children}</Holder>
-          {useVirtual.value && <ScrollBar />}
         </div>
       )
     }

packages/cdk/scroll/src/virtual/composables/useScrollTo.ts

@@ -21,15 +21,13 @@ export function useScrollTo(
   getKey: ComputedRef<GetKey>,
   heights: Map<VKey, number>,
   collectHeight: () => void,
-  setScrollVisible: (visible: boolean) => void,
   syncScrollTop: SyncScrollTop,
 ): VirtualScrollToFn {
   let refId: number
 
   return (option?: number | VirtualScrollToOptions) => {
     // When not argument provided, we think dev may want to show the scrollbar
     if (isNil(option)) {
-      setScrollVisible(true)
       return
     }
 

packages/cdk/scroll/src/virtual/contents/Holder.tsx

@@ -28,7 +28,6 @@ export default defineComponent({
       scrollHeight,
       scrollOffset,
       scrollTop,
-      scrollMoving,
       syncScrollTop,
       originScroll,
     } = inject(virtualScrollToken)!
@@ -40,17 +39,16 @@ export default defineComponent({
       }
       return {
         [fullHeight ? 'height' : 'maxHeight']: height + 'px',
-        overflowY: useVirtual.value ? 'hidden' : 'auto',
+        overflow: 'auto',
         overflowAnchor: 'none',
-        pointerEvents: useVirtual.value && scrollMoving.value ? 'none' : undefined,
       }
     })
 
     const fillerStyle = computed<CSSProperties | undefined>(() => {
       if (scrollOffset.value === undefined) {
         return undefined
       }
-      return { height: `${scrollHeight.value}px`, position: 'relative', overflow: 'hidden' }
+      return { height: `${scrollHeight.value}px`, position: 'relative' }
     })
 
     const contentStyle = computed<CSSProperties>(() => {
@@ -115,6 +113,10 @@ function useEvents(
   let rafId: number
 
   function handleWheel(evt: WheelEvent) {
+    if (evt.shiftKey) {
+      return
+    }
+
     cancelRAF(rafId)
 
     const { deltaY } = evt