Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-16 22:50:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 https://github.com/siyuan-note/siyuan/issues/9620 scroll

Browse source
This commit is contained in:
Vanessa 2023-11-10 10:51:34 +08:00
parent 5ae6f7c93f
commit 7579d3e2b3
1 changed files with 27 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

46
app/src/protyle/scroll/event.ts
View file

@ -5,6 +5,16 @@ import {onGet} from "../util/onGet";
import {isMobile} from "../../util/functions"; import {isMobile} from "../../util/functions";
import {hasClosestBlock, hasClosestByClassName} from "../util/hasClosest"; import {hasClosestBlock, hasClosestByClassName} from "../util/hasClosest";
const getOffsetTop = (element: HTMLElement, topElement: HTMLElement) => {
let tempElement = element
let top = 0
while (topElement.contains(tempElement)) {
top += tempElement.offsetTop
tempElement = tempElement.offsetParent as HTMLElement
}
return top;
}
let getIndexTimeout: number; let getIndexTimeout: number;
export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => { export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
let elementRect = element.getBoundingClientRect(); let elementRect = element.getBoundingClientRect();
@ -25,25 +35,23 @@ export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
} }
protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => { protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => {
if (item.parentElement.classList.contains("protyle-wysiwyg")) { const headerTop = getOffsetTop(item, element) + 43;
const headerTop = item.offsetTop + 43; const headerElement = item.querySelector(".av__row--header") as HTMLElement;
const headerElement = item.querySelector(".av__row--header") as HTMLElement; if (headerElement) {
if (headerElement) { if (headerTop < element.scrollTop && headerTop + headerElement.parentElement.clientHeight > element.scrollTop) {
if (headerTop < element.scrollTop && headerTop + headerElement.parentElement.clientHeight > element.scrollTop) { headerElement.style.transform = `translateY(${element.scrollTop - headerTop}px)`;
headerElement.style.transform = `translateY(${element.scrollTop - headerTop}px)`; } else {
} else { headerElement.style.transform = "";
headerElement.style.transform = "";
}
} }
const footerElement = item.querySelector(".av__row--footer") as HTMLElement; }
if (footerElement) { const footerElement = item.querySelector(".av__row--footer") as HTMLElement;
const footerBottom = headerTop + footerElement.parentElement.clientHeight; if (footerElement) {
const scrollBottom = element.scrollTop + element.clientHeight + 5; const footerBottom = headerTop + footerElement.parentElement.clientHeight;
if (headerTop + 42 + 36 * 2 < scrollBottom && footerBottom > scrollBottom) { const scrollBottom = element.scrollTop + element.clientHeight + 5;
footerElement.style.transform = `translateY(${scrollBottom - footerBottom}px)`; if (headerTop + 42 + 36 * 2 < scrollBottom && footerBottom > scrollBottom) {
} else { footerElement.style.transform = `translateY(${scrollBottom - footerBottom}px)`;
footerElement.style.transform = ""; } else {
} footerElement.style.transform = "";
} }
} }
}); });
@ -64,7 +72,7 @@ export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
const blockElement = hasClosestBlock(targetElement); const blockElement = hasClosestBlock(targetElement);
if (!blockElement) { if (!blockElement) {
if ((protyle.wysiwyg.element.firstElementChild.getAttribute("data-eof") === "1" || if ((protyle.wysiwyg.element.firstElementChild.getAttribute("data-eof") === "1" ||
// goHome 时 data-eof 不为 1 // goHome 时 data-eof 不为 1
protyle.wysiwyg.element.firstElementChild.getAttribute("data-node-index") === "0") && protyle.wysiwyg.element.firstElementChild.getAttribute("data-node-index") === "0") &&
(hasClosestByClassName(targetElement, "protyle-background") || hasClosestByClassName(targetElement, "protyle-title"))) { (hasClosestByClassName(targetElement, "protyle-background") || hasClosestByClassName(targetElement, "protyle-title"))) {
const inputElement = protyle.scroll.element.querySelector(".b3-slider") as HTMLInputElement; const inputElement = protyle.scroll.element.querySelector(".b3-slider") as HTMLInputElement;