Merge pull request #124 from ONLYOFFICE/bugfix/page-scroll
Bugfix/page scroll
This commit is contained in:
commit
b0eda4afee
@ -107,6 +107,8 @@ const Layout = (props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const onScroll = (e) => {
|
const onScroll = (e) => {
|
||||||
|
if (window.innerHeight < window.innerWidth) return;
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
window.scrollTo(0, 0);
|
window.scrollTo(0, 0);
|
||||||
|
@ -18,7 +18,9 @@ import ModalBackdrop from "../components/ModalBackdrop";
|
|||||||
import Scrollbar from "../../scrollbar";
|
import Scrollbar from "../../scrollbar";
|
||||||
import { classNames } from "../../utils/classNames";
|
import { classNames } from "../../utils/classNames";
|
||||||
import FormWrapper from "../components/FormWrapper";
|
import FormWrapper from "../components/FormWrapper";
|
||||||
import { isIOS, isMobileOnly } from "react-device-detect";
|
import { isIOS, isTablet, isMobile } from "react-device-detect";
|
||||||
|
|
||||||
|
let isInitScroll = false;
|
||||||
|
|
||||||
const Modal = ({
|
const Modal = ({
|
||||||
id,
|
id,
|
||||||
@ -53,17 +55,50 @@ const Modal = ({
|
|||||||
const contentRef = React.useRef(0);
|
const contentRef = React.useRef(0);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (isMobileOnly && isIOS) {
|
if (isIOS && isMobile) {
|
||||||
window.visualViewport.addEventListener("resize", onResize);
|
window.visualViewport.addEventListener("resize", onResize);
|
||||||
window.visualViewport.addEventListener("scroll", onResize);
|
window.visualViewport.addEventListener("scroll", onResize);
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
window.visualViewport.removeEventListener("resize", onResize);
|
window.visualViewport.removeEventListener("resize", onResize);
|
||||||
window.visualViewport.removeEventListener("scroll", onResize);
|
window.visualViewport.removeEventListener("scroll", onResize);
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!visible) isInitScroll = false;
|
||||||
|
}, [visible]);
|
||||||
|
|
||||||
|
const scrollPosition = () => {
|
||||||
|
if (currentDisplayType !== "modal") return;
|
||||||
|
|
||||||
|
if (isInitScroll) return;
|
||||||
|
|
||||||
|
const dialogHeader = document
|
||||||
|
.getElementById("modal-header-swipe")
|
||||||
|
?.getBoundingClientRect();
|
||||||
|
|
||||||
|
const input = document
|
||||||
|
.getElementsByClassName("input-component")[0]
|
||||||
|
?.getBoundingClientRect();
|
||||||
|
|
||||||
|
if (dialogHeader && input) {
|
||||||
|
dialogHeader.y < dialogHeader.height + input.height
|
||||||
|
? window.scrollTo(0, input.y)
|
||||||
|
: window.scrollTo(0, dialogHeader.y);
|
||||||
|
}
|
||||||
|
|
||||||
|
isInitScroll = true;
|
||||||
|
};
|
||||||
|
|
||||||
const onResize = (e) => {
|
const onResize = (e) => {
|
||||||
|
if (window.innerHeight < window.innerWidth || isTablet) {
|
||||||
|
scrollPosition();
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (!contentRef.current) return;
|
if (!contentRef.current) return;
|
||||||
|
|
||||||
if (currentDisplayType === "modal") {
|
if (currentDisplayType === "modal") {
|
||||||
|
@ -28,14 +28,14 @@ const Input = ({
|
|||||||
|
|
||||||
return props.mask != null ? (
|
return props.mask != null ? (
|
||||||
<MaskedInput
|
<MaskedInput
|
||||||
className={`${className} not-selectable`}
|
className={`${className} input-component not-selectable`}
|
||||||
keepCharPositions={true}
|
keepCharPositions={true}
|
||||||
guide={false}
|
guide={false}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<input
|
<input
|
||||||
className={`${className} not-selectable`}
|
className={`${className} input-component not-selectable`}
|
||||||
dir={dir}
|
dir={dir}
|
||||||
{...props}
|
{...props}
|
||||||
{...rest}
|
{...rest}
|
||||||
|
Loading…
Reference in New Issue
Block a user