반응형
본문 스크롤 비활성화
HTML에서 스크롤링을 body완전히 비활성화하고 싶습니다 . 다음 옵션을 시도했습니다.
overflow: hidden;(작동하지 않음, 스크롤링을 비활성화하지 않았으며 스크롤바를 숨겼습니다)position: fixed;(이것은 효과가 있었지만 완전히 맨 위로 스크롤 되었으므로이 특정 응용 프로그램에서는 허용되지 않습니다)
이 두 가지 옵션에 대한 대안을 찾을 수 없습니다. 더 이상 있습니까?
설정 height및 overflow:
html, body {margin: 0; height: 100%; overflow: hidden}
본문 태그가 작성할 수있는 작업이 없으면 HTML CSS가 제대로 작동합니다.
<body scroll="no" style="overflow: hidden">
이 경우 재정의는 body 태그에 있어야하며 제어하기가 더 쉽지만 때로는 두통이 생깁니다.
이 게시물은 도움이되었지만 다른 사람들에게 도움이 될 수있는 약간의 대안을 공유하고 싶었습니다.
max-height대신 설정 height도 트릭을 수행합니다. 제 경우에는 클래스 토글을 기반으로 스크롤을 비활성화하고 있습니다. .someContainer {height: 100%; overflow: hidden;}컨테이너의 높이가 뷰포트의 높이보다 작을 때 설정 하면 컨테이너가 늘어나고 원하는 것이 아닙니다. 설정 max-height은이를 고려하지만 콘텐츠가 변경 될 때 컨테이너의 높이가 뷰포트의 높이보다 크면 스크롤이 비활성화됩니다.
참고 URL : https://stackoverflow.com/questions/28411499/disable-scrolling-on-body
반응형
'developer tip' 카테고리의 다른 글
| Clojure에서 doseq와 for의 차이점 (0) | 2020.08.20 |
|---|---|
| 개별 줄을 끊지 않고 파일을 동일한 부분으로 분할하는 방법은 무엇입니까? (0) | 2020.08.20 |
| 최고의 Java obfuscator? (0) | 2020.08.20 |
| try-except없이 Python에서 keyboardinterrupt 캡처 (0) | 2020.08.20 |
| JavaScript에서 추상 기본 클래스를 어떻게 만듭니 까? (0) | 2020.08.20 |