fix(modal): compensate scrollbar width when locking page scroll
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
fcec5b996f
commit
5dd7d14334
3 files changed
+52
-3
No files matched your search
@@ -38,9 +38,43 @@
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
// 参考主题 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) {
|
||||
|
||||
Reference in new issue
Block a user