comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
40 lines (39 loc) • 1.33 kB
JavaScript
import { watch } from "vue";
function useLookScroll(trigger) {
let recordParentWidth = null;
let recordOverflow = null;
function getScrollbarWidth() {
var scrollDiv = document.createElement("div");
scrollDiv.style.width = "100px";
scrollDiv.style.height = "100px";
scrollDiv.style.overflow = "scroll";
scrollDiv.style.position = "absolute";
scrollDiv.style.top = "-9999px";
document.body.appendChild(scrollDiv);
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
return scrollbarWidth;
}
function disableScroll() {
recordParentWidth = document.body.style.getPropertyValue("width");
recordOverflow = document.body.style.getPropertyValue("overflow");
var scrollWidth = getScrollbarWidth();
document.body.style.setProperty("overflow", "hidden");
document.body.style.setProperty("width", `calc(100% - ${scrollWidth}px)`);
}
function enableScroll() {
document.body.style.setProperty("overflow", recordOverflow);
if (recordParentWidth) {
document.body.style.setProperty("width", recordParentWidth);
} else {
document.body.style.removeProperty("width");
}
}
watch(trigger, (val) => {
val && disableScroll();
!val && enableScroll();
});
}
export {
useLookScroll
};