fix: scroll bar hide effect page width

packages/fluent-editor/src/assets/fullscreen.scss

@@ -1,12 +1,21 @@
 :-webkit-full-screen { 
-  background-color: white !important; 
+ background-color: white !important; 
 } 
 :-moz-full-screen { 
-background-color: white !important; 
+ background-color: white !important; 
 } 
 :-ms-fullscreen { 
-background-color: white !important; 
+ background-color: white !important; 
 } 
 :fullscreen { 
-background-color: white !important; 
-} 
+ background-color: white !important; 
+}
+.scroll {
+ &--lock {
+ overflow: hidden !important;
+ }
+ &__wrap {
+ overflow: auto;
+ height: 100%;
+ }
+}

packages/fluent-editor/src/screenshot/index.ts

@@ -2,6 +2,7 @@ import Quill from 'quill'
 import type Toolbar from 'quill/modules/toolbar'
 import type html2canvas from 'html2canvas'
 import type { Options as Html2CanvasOptions } from 'html2canvas'
+import { lockScroll } from '../utils/scroll-lock'
 
 const Delta = Quill.import('delta')
 
@@ -47,7 +48,6 @@ function init() {
  wrapper.appendChild(mask)
  wrapper.appendChild(cutter)
  document.body.appendChild(wrapper)
- document.body.style.overflow = 'hidden'
  return { wrapper, mask, cutter, coordinate }
 }
 
@@ -103,18 +103,20 @@ export function Screenshot(this: Toolbar & ScreenShotOptionsInQuill) {
  leftClickLockFlag: false,
  start: undefined,
  }
+ const cleanLock = lockScroll()
 
  const removeContextmenu = (event: Event) => {
  event.preventDefault()
  wrapper.remove()
+ cleanLock()
  document.removeEventListener('contextmenu', removeContextmenu)
  }
  const afterShotCtrl = async (event: MouseEvent) => {
  document.removeEventListener('mousedown', toggleRect)
- Object.assign(document.body.style, { overflow: null })
  const cutterRect = cutter.getBoundingClientRect()
  const target = event.target as HTMLElement
  wrapper.remove()
+ cleanLock()
  if (target && target.className === 'ql-screenshot-confirm') {
  const image = await renderImage(Html2Canvas, html2CanvasOptions, cutterRect, { beforeCreateCanvas, beforeCreateImage })
 

packages/fluent-editor/src/utils/scroll-lock.ts

@@ -0,0 +1,52 @@
+let scrollBarWidth: number
+export const getScrollBarWidth = ({ target = document.body } = {}): number => {
+ if (scrollBarWidth !== undefined) return scrollBarWidth
+
+ const outer = document.createElement('div')
+ outer.className = 'scroll__wrap'
+ outer.style.visibility = 'hidden'
+ outer.style.width = '100px'
+ outer.style.position = 'absolute'
+ outer.style.top = '-9999px'
+ target.appendChild(outer)
+
+ const widthNoScroll = outer.offsetWidth
+ outer.style.overflow = 'scroll'
+
+ const inner = document.createElement('div')
+ inner.style.width = '100%'
+ outer.appendChild(inner)
+
+ const widthWithScroll = inner.offsetWidth
+ outer.parentNode?.removeChild(outer)
+ scrollBarWidth = widthNoScroll - widthWithScroll
+
+ return scrollBarWidth
+}
+
+export const lockScroll = ({ target = document.body } = {}) => {
+ let scrollBarWidth = 0
+ let originWidth = '0'
+
+ const clockClass = 'scroll--lock'
+
+ const cleanLock = () => {
+ target && (target.style.width = originWidth)
+ target.classList.remove(clockClass)
+ }
+
+ const hasHiddenClass = target.classList.contains(clockClass)
+ if (!hasHiddenClass) {
+ originWidth = target.style.width
+ }
+ scrollBarWidth = getScrollBarWidth({ target })
+ const hasOverflow = (target === document.body ? document.documentElement : target).clientHeight < target.scrollHeight
+ const overflowY = window.getComputedStyle(target).overflowY
+ // only when the scrollbar exists needs to reduce width
+ if (scrollBarWidth > 0 && (hasOverflow || overflowY === 'scroll') && !hasHiddenClass) {
+ target.style.width = `calc(100% - ${scrollBarWidth}px)`
+ }
+ target.classList.add(clockClass)
+
+ return cleanLock
+}