chore: Lock points when scrolling

Author: zombieJ

examples/animate.less

@@ -1,5 +1,5 @@
 .motion {
-  transition: all .3s;
+  transition: all 0.3s;
 }
 
 .item {
@@ -11,6 +11,10 @@
   line-height: 31px;
   position: relative;
 
+  &:hover {
+    background: rgba(255, 0, 0, 0.1);
+  }
+
   &::after {
     content: '';
     border-bottom: 1px solid gray;

src/List.tsx

@@ -70,6 +70,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     virtual !== false && height && itemHeight && data && itemHeight * data.length > height;
 
   const [scrollTop, setScrollTop] = React.useState(0);
+  const [scrollMoving, setScrollMoving] = React.useState(false);
 
   const mergedClassName = classNames(prefixCls, className);
   const mergedData = data || EMPTY_DATA;
@@ -241,6 +242,10 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
 
     if (inVirtual) {
       componentStyle.overflowY = 'hidden';
+
+      if (scrollMoving) {
+        componentStyle.pointerEvents = 'none';
+      }
     }
   }
 
@@ -277,6 +282,12 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
           scrollHeight={scrollHeight}
           count={mergedData.length}
           onScroll={onScrollBar}
+          onStartMove={() => {
+            setScrollMoving(true);
+          }}
+          onStopMove={() => {
+            setScrollMoving(false);
+          }}
         />
       )}
     </div>

src/ScrollBar.tsx

@@ -11,6 +11,8 @@ export interface ScrollBarProps {
   height: number;
   count: number;
   onScroll: (scrollTop: number) => void;
+  onStartMove: () => void;
+  onStopMove: () => void;
 }
 
 interface ScrollBarState {
@@ -69,12 +71,15 @@ export default class ScrollBar extends React.Component<ScrollBarProps, ScrollBar
   };
 
   onMouseDown: React.MouseEventHandler = e => {
+    const { onStartMove } = this.props;
+
     this.setState({
       dragging: true,
       pageY: e.pageY,
       startTop: this.getTop(),
     });
 
+    onStartMove();
     this.patchEvents();
     e.stopPropagation();
     e.preventDefault();
@@ -102,7 +107,10 @@ export default class ScrollBar extends React.Component<ScrollBarProps, ScrollBar
   };
 
   onMouseUp = () => {
+    const { onStopMove } = this.props;
     this.setState({ dragging: false });
+
+    onStopMove();
     this.removeEvents();
   };
 

tests/scroll.test.js

@@ -123,6 +123,8 @@ describe('List.Scroll', () => {
         window.dispatchEvent(mouseMoveEvent);
       });
 
+      expect(wrapper.find('.rc-virtual-list-holder').props().style.pointerEvents).toEqual('none');
+
       act(() => {
         jest.runAllTimers();
       });
@@ -142,4 +144,19 @@ describe('List.Scroll', () => {
       expect(wrapper.find('.rc-virtual-list-scrollbar-thumb')).toHaveLength(0);
     });
   });
+
+  it('no bubble', () => {
+    const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100) });
+
+    // Mouse down
+    const preventDefault = jest.fn();
+    const stopPropagation = jest.fn();
+    wrapper.find('.rc-virtual-list-scrollbar').simulate('mousedown', {
+      preventDefault,
+      stopPropagation,
+    });
+
+    expect(preventDefault).toHaveBeenCalled();
+    expect(stopPropagation).toHaveBeenCalled();
+  });
 });