본문에서 스크롤 비활성화


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

설정 height및 overflow:

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.