docs: about how to still use scrolling container

tiddly-gittly · Dec 1, 2024 · 1cb0852 · 1cb0852
1 parent e2706cd
commit 1cb0852
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/src/streams-outliner-lib/language/en-GB/Readme.tid b/src/streams-outliner-lib/language/en-GB/Readme.tid
@@ -101,6 +101,6 @@ title: your-breadcrumbs-view-template
 
 * Try to remove scrolling from one of the upper containers.
 ** e.g. remove the `height: 100vh;` restriction or remove the `overflow-y: auto;` attribute
-* Or make container a offsetParent of the context menu.
+** Or make container a offsetParent of the context menu, e.g. by adding `position: absolute;top: 0;left: 0;`
 * This is because the context menu is positioned relative to [[`offsetParent` of |https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetParent]], which is typically `document.body`, and if the parent container has If the parent container has scrolling, you will find that no matter how you scroll, the menu is in a fixed position relative to the page, and then the positioning will be wrong relative to the scrolled content.
 ** The principle is that `$eventcatcher` listens on `.stream-row` → provides `<<tv-popup-abs-coords>>` to `$action-popup` to compute the coordinates to put into `<<contextmenu-state>>` → `$reveal` with `<<contextmenu-state>>` to position the context menu relative to `<body>`.
diff --git a/src/streams-outliner-lib/language/zh-Hans/Readme.tid b/src/streams-outliner-lib/language/zh-Hans/Readme.tid
@@ -102,6 +102,6 @@ title: your-breadcrumbs-view-template
 
 * 尝试去掉某个上层容器的滚动
 ** 例如去掉 `height: 100vh;` 限制或去掉 `overflow-y: auto;` 属性
-* 或者让滚动容器成为 `offsetParent`
+** 或者让滚动容器成为 `offsetParent`，例如加上 `position: absolute;top: 0;left: 0;`
 * 这是因为右键菜单的定位是相对于 [[`offsetParent` 的|https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetParent]]，一般就是 `document.body`，如果父容器有滚动，你会发现不管你怎么滚动，菜单都在相对页面的一个固定位置，那么相对于滚动了的内容，定位就会出错。
 ** 原理是 `$eventcatcher` 监听 `.stream-row` → 提供 `<<tv-popup-abs-coords>>` 给 `$action-popup` 计算坐标放入 `<<contextmenu-state>>` → `$reveal` 用 `<<contextmenu-state>>` 来相对于 `<body>` 定位右键菜单