Merge pull request #3847 from 2betop/chore-aside-sticky

chore: 优化 aside styicky 的位置, 如果父级有 scroll 元素,之前的位置不对

src/renderers/Page.tsx

@@ -33,6 +33,8 @@ import mapValues from 'lodash/mapValues';
 import {resolveVariable} from '../utils/tpl-builtin';
 import {buildStyle} from '../utils/style';
 import PullRefresh from '../components/PullRefresh';
+import position from '../utils/position';
+import {scrollPosition} from '../utils/scrollPosition';
 
 /**
  * 样式属性名及值
@@ -385,8 +387,9 @@ export default class Page extends React.Component<PageProps> {
 
     if (asideSticky && this.asideInner.current) {
       const dom = this.asideInner.current!;
-      const rect = dom.getBoundingClientRect();
-      dom.style.cssText += `position: sticky; top: ${rect.top}px;`;
+      dom.style.cssText += `position: sticky; top: ${
+        scrollPosition(dom).top
+      }px;`;
     }
   }
 

src/utils/position.ts

@@ -20,7 +20,6 @@ export default function position(
 ) {
   let parentOffset = {top: 0, left: 0};
   let offset;
-  getComputedStyle;
   // Fixed elements are offset from window (parentOffset = {top:0, left: 0},
   // because it is its only offset parent
   if (getComputedStyle(node).getPropertyValue('position') === 'fixed') {

src/utils/scrollPosition.ts

@@ -0,0 +1,29 @@
+import position from './position';
+
+function getScrollParent(element: HTMLElement | null, includeHidden?: boolean) {
+  if (!element) {
+    return document.body;
+  }
+
+  let style = getComputedStyle(element);
+  const excludeStaticParent = style.position === 'absolute';
+  const overflowRegex = includeHidden
+    ? /(auto|scroll|hidden)/
+    : /(auto|scroll)/;
+
+  if (style.position === 'fixed') return document.body;
+  for (let parent = element; (parent = parent.parentElement!); ) {
+    style = getComputedStyle(parent);
+    if (excludeStaticParent && style.position === 'static') {
+      continue;
+    }
+    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX))
+      return parent;
+  }
+
+  return document.body;
+}
+
+export function scrollPosition(dom: HTMLElement) {
+  return position(dom, getScrollParent(dom));
+}