fix(layout): 面板宿主裁剪视口边缘,收起的面板不再撑出文档双向滚动 (#277)
收起的面板以 transform: translate(102%) 滑出屏幕,但 transform 后的元素仍计入祖先滚动溢出区,导致整个页面可左右/上下拖拽。面板宿主 [data-dsh-panel-host] 是视口尺寸的 fixed 容器,补上 overflow: hidden 后裁剪点恰在视口边缘,开合滑入动画、内部滚动容器与 fixed 弹层均不受影响。e2e 增加回归断言:面板收起时文档 scrollWidth/Height 不得超出视口。
This commit is contained in:
@@ -34,6 +34,15 @@
|
||||
inset: 0;
|
||||
z-index: 40;
|
||||
pointer-events: none;
|
||||
/* Clip at the viewport edge: collapsed panels slide off-screen with
|
||||
`transform: translate(102%)`, and a transformed element still
|
||||
contributes to its ancestors' scrollable overflow — without this the
|
||||
hidden panels extended the document's scrollable area, making the whole
|
||||
page draggable left-right and up-down while any panel was collapsed.
|
||||
The host is exactly viewport-sized (inset: 0), so the clip is invisible
|
||||
until a panel slides in from the edge; internal scroll containers and
|
||||
the app's fixed overlay stack are unaffected. */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:global([data-dsh-panel-host][data-dsh-panel-host-degraded]) {
|
||||
|
||||
Reference in New Issue
Block a user