본문에서 스크롤 사용 안 함
HTML에서 스크롤을 비활성화하고 싶습니다.body완전히.다음 옵션을 사용해 보았습니다.
overflow: hidden;(작동하지 않음, 스크롤을 비활성화하지 않음, 스크롤 바만 숨김)position: fixed;(이것은 작동했지만, 이 특정 애플리케이션에서는 허용되지 않는, 완전히 맨 위로 스크롤되었습니다.)
이 두 가지 옵션에 대한 대안을 찾을 수가 없었는데, 더 있나요?
세트height그리고.overflow:
html, body {margin: 0; height: 100%; overflow: hidden}
이 작업을 수행하려면 위에 2개의 CSS 속성을 추가합니다.<body>요소.
body {
height: 100%;
overflow-y: hidden;
}
요즘에는 사용자가 계정을 만들어야 하는 뉴스 웹사이트들이 많습니다.일반적으로 약 1초 동안 페이지에 대한 전체 액세스 권한을 부여한 다음 팝업을 표시하고 사용자가 아래로 스크롤하는 것을 막습니다.
편집
또한 일부 웹 사이트(예: Quora)는 텍스트 부분을 흐리게 만듭니다.일반적으로 그들은 다음과 같은 CSS를 적용하여 이를 수행합니다.
filter: blur(3px);
HTML CSS는 바디 태그가 아무것도 쓸 수 없다면 잘 작동합니다.
<body scroll="no" style="overflow: hidden">
이 경우 우선 순위가 바디 태그에 있어야 하며, 제어하기가 더 쉽지만 때때로 두통을 유발하기도 합니다.
이 게시물은 도움이 되었지만, 다른 사람들에게 도움이 될 수 있는 약간의 대안을 공유하고 싶었을 뿐입니다.
세팅max-height대신에height또한 효과가 있습니다.저 같은 경우는 클래스 토글에 따라 스크롤을 비활성화하고 있습니다.세팅.someContainer {height: 100%; overflow: hidden;}컨테이너의 높이가 뷰포트의 높이보다 작으면 컨테이너가 늘어나게 되는데, 이는 당신이 원하는 것이 아닐 것입니다.세팅max-height는 이를 설명하지만 내용이 변경될 때 컨테이너의 높이가 뷰포트의 높이보다 클 경우, 는 여전히 스크롤을 사용하지 않습니다.
- 반응 >= 17.8 사용?
- 조건부로 하실래요?
useEffect구조를 위해!
function useImperativeDisableScroll({ element, disabled }) {
useEffect(() => {
if (!element) {
return
}
element.style.overflowY = disabled ? 'hidden' : 'scroll'
return () => {
element.style.overflowY = 'scroll'
}
}, [disabled])
}
예를 들어 이것을 사용할 수 있습니다.
useImperativeDisableScroll({ element: document.body, disabled: true })
사용 사례에 따라 다음과 같은 운이 더 좋을 수 있습니다.
useImperativeDisableScroll({
element: document.scrollingElement,
disabled: true
})
그러나 작성 시 폴리필(polyfill)이 필요할 수 있습니다.document.scrollingElement.
유용한 링크:
- https://developer.mozilla.org/en-US/docs/Web/API/document/scrollingElement
- https://drafts.csswg.org/cssom-view/ #dom-dom-dom-dom-dom 요소
- https://caniuse.com/document-scrollingelement
- https://github.com/yangg/scrolling-element
웹 앱에 대한 팝업 구성 요소를 만들어야 할 때 본문 요소를 동적으로 변경하지 않고 스크롤을 비활성화할 수 있는 또 다른 편리한 방법이 있습니다.먼저 다음 스타일을 추가합니다.
body:has(.requires-no-scroll) {
overflow: hidden;
}
그런 다음 팝업을 만들거나 열 때 이 클래스를 해당 클래스에 추가하면 해당 클래스가 자동으로 스크롤을 차단합니다(팝업을 제거할 때 차단 해제).
<div class="popup requires-no-scroll">
...
</div>
이것은 반응형 부울 변수에 따라 팝업을 표시할 때 유용합니다. 즉, 스크롤이 스스로 차단되고 다른 작업을 수행할 필요가 없습니다.
이걸 해보는 건 어때요?
<style type="text/css">
html, body {
overflow: hidden;
}
</style>
이렇게 하면 페이지 스크롤이 방지됩니다.
body, html {
overflow: hidden
}
페이지를 상단으로 스크롤해도 괜찮으시다면요.할 수 있습니다.
position: fixed;
스크롤할 수 없는 요소를 선택할 수 있습니다.당신이 원하는 답변이 아니라는 것을 알지만, 이 문제로 구글에 검색하신 분들을 위해 제목에 직접 답을 드립니다.
HTML
<body id="appBody">
....
</body>
JS
function disableBodyScroll(){
const element = document.querySelector("#appBody");
element.classList.add("stop-scroll");
}
function enableBodyScroll(){
const element = document.querySelector("#appBody");
element.classList.remove("stop-scroll");
}
CSS
.stop-scroll {
margin: 0;
height: 100%;
overflow: hidden;
}
신체의 주요 자식에서 스크롤을 비활성화하고 싶지만 신체 자체에서는 스크롤을 비활성화하려면(필요에 따라/기타 이유로) 해당 클래스를 적용할 수 있습니다.
.app {
height: 100vh;
overflow-y: hidden;
filter: blur(npx);
}
나만큼 힘든 사람들을 위해.가은우과우 인 경우Html그다음에 추가합니다.overflow: hidden에 대신에 body
언급URL : https://stackoverflow.com/questions/28411499/disable-scrolling-on-body
'programing' 카테고리의 다른 글
| mySQL의 전체 테이블에서 문자열 검색 (0) | 2023.09.15 |
|---|---|
| 오라클에서 JDBC 배치 삽입에서 생성된 키를 가져오는 방법은 무엇입니까? (0) | 2023.09.10 |
| 두 개의 데이터 프레임을 결합하고, 한 열에서 모든 열을 선택하고 다른 열에서 일부 열을 선택합니다. (0) | 2023.09.10 |
| 더 큰 글리폰 (0) | 2023.09.10 |
| Android의 색상 이해 (6자) (0) | 2023.09.10 |