fix: skip nonscrollable element to judge autoHide

demo/auto-hide-when-scroll-out.md

@@ -0,0 +1,71 @@
+---
+title: 滚动自动隐藏面板
+order: 16
+---
+
+展示 `autoHideScrollOverflow` 的用法
+
+```jsx
+import Overlay from '@alifd/overlay';
+
+const { Popup } = Overlay;
+
+const style = {
+  width: 400,
+  height: 100,
+  padding: 10,
+  background: '#fff',
+  borderRadius: 2,
+  boxShadow: '2px 2px 20px rgba(0, 0, 0, 0.15)',
+};
+
+const FunctionalOverlay = (props) => (
+  <span {...props} style={style}>
+    Hello World From Popup!
+  </span>
+);
+
+const FunctionalButton = (props) => (
+  <button style={{ border: '4px solid' }} {...props}>
+    Open
+  </button>
+);
+
+ReactDOM.render(
+  <div>
+    <div className="scroll-box">
+      <div style={{ height: 50 }}></div>
+      <div>
+        <Popup overlay={<div className="my-popup">auto hide</div>} visible triggerType="click">
+          <button>trigger1</button>
+        </Popup>
+        <Popup
+          overlay={<div className="my-popup">not hide</div>}
+          visible
+          triggerType="click"
+          autoHideScrollOverflow={false}
+        >
+          <button style={{ marginLeft: 50 }}>trigger2</button>
+        </Popup>
+      </div>
+      <div style={{ height: 500 }}></div>
+    </div>
+  </div>,
+  mountNode
+);
+```
+
+```css
+.scroll-box {
+  height: 300px;
+  width: 400px;
+  border: 1px solid #000;
+  overflow: auto;
+}
+.my-popup {
+  background-color: cyan;
+  height: 150px;
+  text-align: center;
+  line-height: 150px;
+}
+```

src/utils.ts

@@ -122,7 +122,9 @@ export const getOverflowNodes = (targetNode: HTMLElement, container: HTMLElement
   let overflowNode = getViewPort(targetNode.parentElement);
 
   while (overflowNode && container.contains(overflowNode) && container !== overflowNode) {
-    overflowNodes.push(overflowNode);
+    if (isScrollableElement(overflowNode)) {
+      overflowNodes.push(overflowNode);
+    }
     if (overflowNode.parentElement) {
       overflowNode = getViewPort(overflowNode.parentElement);
     } else {
@@ -198,6 +200,20 @@ const isContentClippedElement = (element: Element) => {
   return overflow && overflow !== 'visible';
 };
 
+/**
+ * 判断元素是否是可滚动的元素，且滚动内容尺寸大于元素尺寸
+ */
+function isScrollableElement(element: Element) {
+  const overflow = getStyle(element, 'overflow');
+  // 这里兼容老的逻辑判断，忽略 hidden
+  if (overflow && overflow.match(/auto|scroll/)) {
+    const { clientWidth, clientHeight, scrollWidth, scrollHeight } = element;
+    // 仅当实际滚动高度大于元素尺寸时，才被视作是可滚动元素
+    return clientHeight !== scrollHeight || clientWidth !== scrollWidth;
+  }
+  return false;
+}
+
 /**
  * 获取最近的裁剪内容区域的祖先节点
  */