fix(modal): compensate scrollbar width when locking page scroll

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Fable 5 committed 2026-10-28 21:07:27 +08:00
1 parent fcec5b996f
commit 5dd7d14334
3 files changed
+52 -3

No files matched your search

+36 -2
View File
@@ -38,9 +38,43 @@
.replace(/'/g, "&#39;");
}
// 参考主题 Bootstrap Modal setScrollbar/resetScrollbar 等价物:
// overflow:hidden 会去掉页面滚动条,版心与 fixed 顶栏随之变宽而横向跳动,
// 因此锁定前测量滚动条宽度,给 body 与 fixed 元素补同宽 padding-right,解锁时还原。
var SCROLLBAR_FIXED = ".nav-fixed .header, .float-right";
var scrollLock = null;
function padRight(element, gap) {
var inline = element.style.paddingRight;
var computed = parseFloat(window.getComputedStyle(element).paddingRight) || 0;
element.style.paddingRight = computed + gap + "px";
return { element: element, inline: inline };
}
function lockScroll(lock) {
document.documentElement.classList.toggle("aksrt-modal-runtime-open", !!lock);
document.body.classList.toggle("aksrt-modal-runtime-open", !!lock);
var html = document.documentElement;
var body = document.body;
if (lock) {
if (scrollLock) return;
var gap = window.innerWidth - html.clientWidth;
scrollLock = [];
if (gap > 0) {
scrollLock.push(padRight(body, gap));
document.querySelectorAll(SCROLLBAR_FIXED).forEach(function (element) {
scrollLock.push(padRight(element, gap));
});
}
html.classList.add("aksrt-modal-runtime-open");
body.classList.add("aksrt-modal-runtime-open");
return;
}
if (!scrollLock) return;
html.classList.remove("aksrt-modal-runtime-open");
body.classList.remove("aksrt-modal-runtime-open");
scrollLock.forEach(function (entry) {
entry.element.style.paddingRight = entry.inline;
});
scrollLock = null;
}
function skeleton(options) {