@shival99/z-ui 2.3.3 → 2.3.5

package/assets/css/overlay.css

@@ -77,12 +77,6 @@
     }
   }
 
-  /* Khoá scroll trang nhưng giữ nguyên document flow bằng compensation ở body. */
-  html.z-scroll-locked {
-    overflow: hidden;
-    scrollbar-gutter: auto;
-  }
-
   @media (prefers-reduced-motion: reduce) {
     .z-overlay-pane,
     .z-overlay-backdrop {
@@ -91,7 +85,23 @@
   }
 }
 
-/* Must stay outside the base layer so it can override the global stable gutter while locked. */
+/*
+ * Khoá scroll trang. Phải nằm NGOÀI `@layer base` để thắng rule `html { ... }` mà app khai báo
+ * không-layer (rule trong layer luôn thua rule không-layer, bất kể specificity).
+ */
 html.z-scroll-locked {
-  scrollbar-gutter: auto;
+  overflow: hidden;
+}
+
+/*
+ * `overflow: hidden` làm scrollbar biến mất và nhả lại đúng chiều rộng của nó -> toàn bộ UI (kể cả
+ * element `position: fixed`) nở ra rồi co lại khi đóng overlay. `scrollbar-gutter: stable` giữ nguyên
+ * chỗ đó nên không có gì dịch chuyển. ZScrollLockService chỉ gắn class này khi trang vốn đã dành chỗ
+ * cho scrollbar — trang không có scrollbar (hoặc scrollbar dạng overlay) mà giữ gutter thì lại co vào.
+ * Trình duyệt không hỗ trợ `scrollbar-gutter`: service đo hiệu số thật rồi bù `padding-right` vào body
+ * và ghi ra `--z-scroll-lock-gutter` (0px khi không nhả) để app tự bù cho element fixed của mình:
+ * `.my-fixed-bar { padding-right: var(--z-scroll-lock-gutter, 0px); }`
+ */
+html.z-scroll-locked.z-scroll-locked-gutter {
+  scrollbar-gutter: stable;
 }