deblan-mirror/editor.js
deblan-mirror/editor.js
1
0
Fork 0
mirror of https://github.com/codex-team/editor.js synced 2026-03-15 15:15:47 +01:00
Code Issues Projects Releases Wiki Activity

Fix scrolling issue on mobile when locking scroll on body

Browse source
This commit is contained in:
Tanya Fomina 2022-04-29 12:55:36 +08:00
commit 2f2dcb11bd
4 changed files with 46 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
example/example-dev.html
View file

@ -12,7 +12,7 @@
<link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
<link href="assets/demo.css" rel="stylesheet">
<script src="assets/json-preview.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
</head>
<body>
<script>

5
src/components/utils/popover.ts
View file

@ -4,6 +4,7 @@ import Flipper from '../flipper';
import SearchInput from './search-input';
import EventsDispatcher from './events';
import { isMobileScreen, keyCodes, cacheable } from '../utils';
import * as scrollLocker from './scroll-locker';
/**
* Describe parameters for rendering the single item of Popover
@ -197,7 +198,7 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
}
if (isMobileScreen()) {
document.documentElement.classList.add(Popover.CSS.documentScrollLocked);
scrollLocker.lock();
}
}
@ -211,7 +212,7 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
this.flipper.deactivate();
if (isMobileScreen()) {
document.documentElement.classList.remove(Popover.CSS.documentScrollLocked);
scrollLocker.unlock();
}
}

34
src/components/utils/scroll-locker.ts Normal file
View file

@ -0,0 +1,34 @@
/**
* Stores last scroll offset
*/
let scrollPosition = null;
/**
* Name of the class applied to html element to lock body scroll
*/
const scrollLockedClassName = 'ce-scroll-locked';
/**
* Lock body element scroll
*/
export function lock(): void {
scrollPosition = window.pageYOffset;
document.documentElement.style.setProperty(
'--window-scroll-offset',
`${scrollPosition}px`
);
document.documentElement.classList.add(scrollLockedClassName);
}
/**
* Unlocks body element scroll
*/
export function unlock(): void {
document.documentElement.classList.remove(scrollLockedClassName);
if (scrollPosition !== null) {
window.scrollTo(0, scrollPosition);
}
scrollPosition = null;
}

14
src/styles/ui.css
View file

@ -128,11 +128,13 @@
}
}
.ce-scroll-locked, .ce-scroll-locked > body {
height: 100vh;
.ce-scroll-locked {
height: calc(100vh + env(safe-area-inset-bottom));
}
.ce-scroll-locked > body {
overflow: hidden;
/**
* Mobile Safari fix
*/
position: relative;
top: calc(-1 * var(--window-scroll-offset));
position: fixed;
width: 100%;
}