- 根因:弹窗内下拉/日历菜单仍是 absolute(相对 .sel 定位), 而 placeMenu 按视口坐标赋 left/top,两者不一致导致菜单右偏撑出横向溢出 - 修复:.modal .sel-menu 改 position: fixed,与 placeMenu 的坐标口径一致, 同时脱离 modal-body 滚动容器的横向边界不再被裁剪 - modal-body / mask 显式 overflow-x: hidden 兜底
This commit is contained in:
@@ -134,6 +134,9 @@
|
||||
opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none;
|
||||
transition: opacity .18s, transform .18s cubic-bezier(.16, 1, .3, 1);
|
||||
}
|
||||
/* 弹窗内:placeMenu 按视口坐标赋值,故必须 fixed;
|
||||
同时脱离 modal-body 的滚动容器横向边界,避免撑出横向滚动条 */
|
||||
.modal .sel-menu { position: fixed; }
|
||||
.sel.open .sel-menu { opacity: 1; transform: none; pointer-events: auto; }
|
||||
.sel-menu.up { top: auto; bottom: calc(100% + 6px); }
|
||||
.sel-opt {
|
||||
@@ -346,7 +349,7 @@
|
||||
.mask {
|
||||
position: fixed; inset: 0; z-index: 50; background: rgba(15, 23, 42, .42);
|
||||
backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center;
|
||||
padding: 20px; animation: fadeIn .2s; overflow-y: auto;
|
||||
padding: 20px; animation: fadeIn .2s; overflow-y: auto; overflow-x: hidden;
|
||||
}
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
.modal {
|
||||
@@ -359,7 +362,7 @@
|
||||
/* 三段式布局:头部固定 / 内容滚动 / 底栏固定,外层 overflow:hidden 保住圆角 */
|
||||
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 14px; flex-shrink: 0; }
|
||||
.modal-head h2 { font-size: 18px; font-weight: 700; margin: 0; }
|
||||
.modal-body { padding: 2px 24px 6px; overflow-y: auto; flex: 1; min-height: 0; }
|
||||
.modal-body { padding: 2px 24px 6px; overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; }
|
||||
.modal-body::-webkit-scrollbar, .rte-body::-webkit-scrollbar { width: 6px; }
|
||||
.modal-body::-webkit-scrollbar-thumb, .rte-body::-webkit-scrollbar-thumb { background: #d5dbea; border-radius: 99px; }
|
||||
.modal-body::-webkit-scrollbar-thumb:hover, .rte-body::-webkit-scrollbar-thumb:hover { background: #b6c0d8; }
|
||||
|
||||
Reference in New Issue
Block a user