본문에서 스크롤 비활성화


137

HTML에서 스크롤을 body완전히 비활성화하고 싶습니다 . 다음 옵션을 시도했습니다.

  • overflow: hidden; (작동하지 않고 스크롤을 비활성화하지 않고 스크롤 막대를 숨겼습니다)

  • position: fixed; (이 작동했지만 맨 위로 완전히 스크롤 되어이 특정 응용 프로그램에서는 허용되지 않습니다)

이 두 가지 옵션에 대한 대안을 찾을 수 없습니다. 더 이상 있습니까?


3
어떤 요소에 overflow : hidden을 적용 했습니까?
Sajad Karuthedath

여기서 정확히 무엇을 달성하려고합니까? 최종 목표는 무엇입니까?
jbutler483

2
관련 코드를 표시하면 도움이 더 쉬워집니다.
Sleek Geek

1
오버플로 : 숨겨진; 갈 길입니다. 작동하지 않으면 CSS에 다른 문제가 있습니다. 이것이 작동하지 않으면 html, body {overflow : hidden;}을 시도하십시오 * {overflow : hidden;} 시도하고 무엇이 잘못되었는지 알아보십시오
Jonas Grumann

답변:


245

설정 heightoverflow:

html, body {margin: 0; height: 100%; overflow: hidden}

http://jsfiddle.net/q99hvawt/


3
"body"전에 "html,"에 대해 잊어 버렸습니다.

2
위치가 고정 된 오버레이 요소가있는 경우 iOS에서 작동하지 않습니다.
not Q

1
"overflow": "hidden"을 추가하면 정상적으로 작동합니다.
JPG

이 솔루션은 즉시 작동하지 않았지만 검사 후 "여백"이 어딘가에 재정의되었습니다. 해당 요소의 "여백 : 0;"설정 트릭을했다.
joaoprib

19

body 태그가 아무것도 쓸 수 없으면 HTML CSS가 제대로 작동합니다.

<body scroll="no" style="overflow: hidden">

이 경우 재정의가 body 태그에 있어야하며 제어하기가 쉽지만 때로는 두통이 발생합니다.


21
이것은 유효하지 않습니다 HTML5
mbomb007

@ mbomb007 HTML5와 관련된 실수에 대해 의견을 말해주십시오.
Ethan

5
@Ethan 태그 scroll에서 속성이 유효하지 않습니다 <body>. 내가 찾을 수있는 사양에 유효한 것으로 표시되지 않았습니다. w3 학교 ; MDN ; Quackit
mbomb007

14

이 게시물은 도움이되었지만 다른 사람들을 도울 수있는 약간의 대안을 공유하고 싶었습니다.

max-height대신 설정 height하면 트릭이 수행됩니다. 제 경우에는 클래스 토글을 기반으로 스크롤을 사용하지 않습니다. .someContainer {height: 100%; overflow: hidden;}컨테이너의 높이가 뷰포트의 높이보다 작을 때 설정 하면 컨테이너가 늘어나므로 원하는 것이 아닙니다. 이를 설정 max-height하면 내용이 변경 될 때 컨테이너의 높이가 뷰포트의 높이보다 큰 경우에도 스크롤이 비활성화됩니다.


이것은 스크롤 탑 상단의 부작용없이 데스크탑 브라우저의 하루를 절약했습니다. 그러나 모바일 브라우저 (iphone5s 및 android)에서는 작동하지 않았습니다.
bob

5

이를 위해 <body>요소 에 2 개의 CSS 속성을 추가하십시오 .

body {
   height: 100%;
   overflow-y: hidden;
}

요즘에는 사용자가 계정을 만들어야하는 많은 뉴스 웹 사이트가 있습니다. 일반적으로 약 1 초 동안 페이지에 대한 전체 액세스 권한을 부여한 다음 팝업을 표시하고 사용자가 아래로 스크롤하지 못하게합니다.

전신


스크롤바가 숨겨집니다. 그러나 문제는 스크롤 막대를 숨기는 대안을 요구하는 것입니다
DataGeek

@DataGeek, 이것은 스크롤 막대를 숨길뿐만 아니라 아래로 스크롤하는 기능을 중지합니다. 그리고 내가 이해 한대로 요청되었습니다. 즉, 그것을 숨길뿐만 아니라 아래로 스크롤하는 것을 불가능하게 만듭니다.
bvdb
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.