React 렌더링된 구성 요소에서 CSS를 사용한 스크롤 방지
그래서 내 안에 React를 통해 컴포넌트를 렌더링합니다.html다음과 같이 합니다.
<html>
<body>
<div id=app>${appHtml}</div>
<script src="/bundle.js"></script>
</body>
</html>
내 앱에는 버거 버튼이 있어onClick풀스크린으로 넘어갑니다.
그러나 본체는 스크롤할 수 있습니다.저는 보통 수업 내용을body꼬리표를 달고 그것을 만들다overflow: hidden이걸 막기 위해서요.단, 내 리액션 컴포넌트는 다음 중 하나 내에서 렌더링됩니다.body태그를 지정하여 반응 컴포넌트 내의 클릭에 따라 클래스를 전환할 수 없습니다.
제가 찾고 있는 것을 어떻게 달성할 수 있는지에 대한 아이디어나 조언이 있습니까?
감사합니다!
"리액션 컴포넌트 내의 클릭에 따라 클래스를 전환할 수 없습니다."
꼭 그렇지만은 않아요!
「React-full」로 생각하고, DOM 의 변경을 경계하는 것은 좋은 일입니다.DOM 조작을 피하고 싶은 주된 이유는 React가 렌더링하려는 내용과 사용자가 수행하려는 알 수 없는 변경 간에 충돌이 발생하기 때문입니다.그러나 이 경우 React가 렌더링하는 DOM을 조작하는 것이 아니라 상위 DOM을 조작하는 것입니다.이 경우 다음과 같은 작업을 수행해도 전혀 문제가 없습니다.
document.body.style.overflow = "hidden"
또는
document.body.classList.add("no-scroll")
아니면 뭐든 될 수 있는 거든.리액트는 DOM만 렌더링하기 때문에 완전히 안전합니다.#app부모에게 무슨 일이 일어나든 상관하지 않는 거죠실제로 많은 앱과 웹사이트에서 React를 사용하여 전체 앱 대신 단일 구성 요소 또는 위젯을 렌더링합니다.
그것 말고도, 당신이 원하는 것을 할 수 있는 더 나은, 더 "실효적인" 방법이 있습니다.스크롤 컨테이너가 리액트 앱에 들어가도록 앱을 재구성하기만 하면 됩니다.body구조는 다음과 같습니다.
<html>
<body>
<div id="app">
<div id="scroll-container">
<!-- the rest of your app -->
</div>
</div>
</body>
</html>
만들다body오버플로우 숨김, 그리고body그리고.#app전체 화면을 채우고, 그 중 하나를 선택할 수 있습니다.#scroll-containerReact 내에서 스크롤하거나 완전히 스크롤할 수 없습니다.
위의 내용은 iOS 모바일에서는 사용할 수 없습니다.
body-scroll-lock은 CSS와 JS의 조합을 사용하여 타깃 요소(모달 등)의 스크롤 가능성을 유지하면서 모든 디바이스에서 동작하도록 합니다.
즉, iOS의 경우 대상 요소의 하단 또는 상단에 도달한 시점을 감지한 후 스크롤을 완전히 중지해야 합니다.
reactjs와 함께 body-scroll-lock 라이브러리를 사용하는 방법은 다음과 같습니다.
import React, {useState} from 'react';
import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
// Components
import Hamburger from './HeaderComponents/Hamburger.js';
import MegaDropdown from './HeaderComponents/MegaDropdown.js';
const Header = props => {
// variables
const [isSideNavShown, setIsSideNavShown] = useState(false);
const [isDropdownShowing, setIsDropdownShowing] = useState(false);
isDropdownShowing ? disableBodyScroll(document) : enableBodyScroll(document)
return (
<header className="header">
<Hamburger isDropdownShowing={isDropdownShowing} setIsDropdownShowing={setIsDropdownShowing} />
<MegaDropdown isDropdownShowing={isDropdownShowing} setIsDropdownShowing={setIsDropdownShowing} />
</header>
)
}
export default Header;
행은 " " " " ""isDropdownShowing ? disableBodyScroll(document) : enableBodyScroll(document)
이것에 의해, 드롭 다운의 컨텐츠가 스크롤을 추가할 필요가 있을 정도로 가득 차면, 드롭 다운이 표시되는 동안(화면 전체를 덮는) 윈도우(본문) 스크롤은 무효가 됩니다.따라서 창(본문) 스크롤이 비활성화되어 있더라도 드롭다운을 스크롤할 수 있습니다.
css를 사용하는 것이 .position: "sticky"하지만 여기서 의문이 제기되는 건 그게 아닌 것 같아요.이 더 것 같아요을 사용하다
내 의견: 콘텐츠를 포함하는 div의 높이를 100%(높이: 100%)로 설정할 수 있습니다.또는 이 경우 본체 {높이: 100%}
시체 스크롤을 다룰 작은 갈고리를 썼어
import { useState, useEffect } from "react";
export default function useSetBodyScroll() {
const [bodyScroll, setBodyScroll] = useState(true);
useEffect(() => {
const resetOnResize = () => {
if (window.innerWidth <= 1023) document.body.style.overflow = "hidden";
if (window.innerWidth >= 1024) document.body.style.overflow = "scrolls";
};
if (!bodyScroll) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "scroll";
window.addEventListener("resize", resetOnResize);
}
return () => {
window.removeEventListener("resize", resetOnResize);
};
}, [bodyScroll]);
return setBodyScroll;
}
[다음]에서사용할 수 있는 JS:
const html = document.querySelector('html');
if (html) {
html.style.overflow = 'hidden';
}
리셋할 수 있는 항목은 다음과 같습니다.
const html = document.querySelector('html');
if (html) {
html.style.overflow = 'auto';
}
Hooks하는 기능 은 Hooks(React 16.8+)를 사용하는 입니다.useEffect이치노
useEffect(() => {
const html = document.querySelector("html");
if (html) {
html.style.overflow = state.isMenuOpen ? "hidden" : "auto";
}
}, [state.isMenuOpen]); // condition to watch to perform side effect
React.useEffect() 후크를 사용하여 특정 페이지에서 스크롤을 비활성화한 후 정리합니다.예
useEffect(() => {
document.body.style.overflow = "hidden";
return () => (document.body.style.overflow = "scroll");
});
언급URL : https://stackoverflow.com/questions/39962757/prevent-scrolling-using-css-on-react-rendered-components
'source' 카테고리의 다른 글
| 동일한 이름의 내보낸 클래스 두 개 가져오기 (0) | 2023.03.23 |
|---|---|
| Python을 사용하는 JSON에 대한 개체 목록 (0) | 2023.03.23 |
| React 구성 요소에서 PDF 파일 생성 (0) | 2023.03.23 |
| unix:/var/run/php5-fpm.sock에 연결하지 못했습니다.설정에 문제가 있는 것은 무엇입니까? (0) | 2023.03.23 |
| iPhone 및 iPad에서 외부 Sharepoint 사이트의 텍스트 입력에 액세스할 수 없음 (0) | 2023.03.23 |