diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index 8100d7124..8a91ae9fb 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -63,7 +63,11 @@ &__gutters { @extend .protyle-gutters; - display: none; + position: fixed; + top: 0; + left: -44px; + opacity: 0; + display: flex; z-index: 2; svg { @@ -105,7 +109,7 @@ } .av__gutters { - display: flex; + opacity: 1; } } diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts index 86df8ad5c..48c4c95f0 100644 --- a/app/src/protyle/render/av/action.ts +++ b/app/src/protyle/render/av/action.ts @@ -70,7 +70,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle } const gutterElement = hasClosestByClassName(event.target, "av__gutter"); - if (gutterElement && gutterElement.parentElement.classList.contains("av__gutters")) { + if (gutterElement) { const rowElement = hasClosestByClassName(gutterElement, "av__row"); if (!rowElement) { return; diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index 33433f3df..1730e378f 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/app/src/protyle/wysiwyg/index.ts @@ -1459,13 +1459,8 @@ export class WYSIWYG { // database 行块标 const rowElement = hasClosestByClassName(event.target, "av__row"); if (rowElement && rowElement.dataset.id) { - const scrollElement = hasClosestByClassName(rowElement, "av__scroll"); - const guttersElement = rowElement.querySelector(".av__gutters"); - if (scrollElement && guttersElement) { - const width = guttersElement.offsetWidth; - guttersElement.style.top = `${rowElement.getBoundingClientRect().top}px`; - guttersElement.style.left = `${scrollElement.getBoundingClientRect().left - width}px`; - } + const guttersElement = rowElement.querySelector(".av__gutters"); + guttersElement.setAttribute("style", `left:${rowElement.parentElement.parentElement.getBoundingClientRect().left - guttersElement.clientWidth}px;top:${rowElement.getBoundingClientRect().top}px`); } protyle.gutter.render(protyle, nodeElement, this.element); }