브라우저 수직 및 수평 스크롤바 비활성화

117

jQuery 또는 javascript를 사용하여 브라우저의 수직 및 수평 스크롤바를 비활성화 할 수 있습니까?

javascript jquery

— Naveen
소스

: 나는 당신이 스크롤이 솔루션은보다 바람직하다없이 스크롤 사이를 전환하려면 특별히 어떤 상황에서 생각 stackoverflow.com/questions/8701754/...

— 유세프 Salimpour

이 질문에 대한 더 완전한 답변은 여기에서 찾을 수 있습니다. stackoverflow.com/a/25561646/1922144

— davidcondrey 2014 년

144

스크롤바를 동적으로 숨기고 표시 할 가능성이 필요한 경우 사용할 수 있습니다.

$("body").css("overflow", "hidden");

과

$("body").css("overflow", "auto");

코드 어딘가에.

— 알렉산더 프로코피예프
소스

4

오버플로 숨김이 IE에서 항상 작동하는 것은 아닙니다. 아래 AnthonyWJones 답변을 참조하십시오.

— Tiago Almeida

4

oveflow: hidden스마트 폰에서 아무것도 막지 않습니다.

— dvlden 2014 년

크롬에서는 스크롤바를 숨기지 않고 비활성화합니다 (여전히 거기에 있고 다른 모든 것의 크기를 변경하지만 이제는 회색으로 표시됨)

— taltamir

121

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // ie only
}

— Lyncee
소스

5

두 개의 찬성 투표는 유일한 순수한 자바 스크립트 답변이기 때문에 현저히 적습니다.

— Fzs2 2011

2

@HermannIngjaldsson : OP가 JavaScript 또는 jQuery 솔루션을 요청했고 4 년 전에 jQuery 솔루션을 수락 한 것은 의미가 있습니다. 나는 대답이 좋지 않다고 말하는 것이 아니라 낮은 표에 대한 명백한 것을 언급하는 것뿐입니다. 어쨌든 나에게서 +1.

— 아니

이것이 저에게 효과가 있었던 유일한 해결책입니다. body hidden overflow가 전체 문서를 공격하지 않기 때문에 이것이이 문제에 대한 올바른 해결책입니다! 정말 감사합니다. 시간을 많이 절약 해 주셨습니다!

— Adnane.T 2014 년

이것은 훌륭한 솔루션이며 찬성 할 가치가 있습니다. 또한 페이지가 맨 위로 스크롤되는 고정 CSS 문제도 해결합니다.

— haipham23

50

CSS 사용해보기

<body style="overflow: hidden">

— 레이 루
소스

15

브라우저 호환성을 위해 HTML 태그

— 에도이

32

지금까지 overflow : hidden on the body가 있습니다. 그러나 IE는 항상이를 존중하지 않으며 body 요소에도 scroll = "no"를 입력하거나 html 요소에도 overflow : hidden을 배치해야합니다.

뷰 포트를 '제어'해야 할 때 이것을 더 할 수 있습니다.

<style>
 body {width:100%; height:100%; overflow:hidden; margin:0; }
 html {width:100%; height:100%; overflow:hidden; }
</style>

body에서 높이가 100 % 인 요소는 창 뷰포트의 전체 높이를 가지며 bottom : nnPX를 절대적으로 사용하여 배치 된 요소는 창의 아래쪽 가장자리보다 nn 픽셀 위에 설정됩니다.

— 앤서니 W 존스
소스

2

','가 ';'이어야하지 않습니까?

— paynestrike

12

CSS를 사용해보십시오.

수평을 제거하려면

overflow-x: hidden;

그리고 수직을 제거하려면

overflow-y: hidden;

— 샤프 라즈
소스

10

최신 버전의 IE (IE10 이상)에서는 -ms-overflow-style속성을 사용하여 스크롤바를 숨길 수 있습니다 .

html {
     -ms-overflow-style: none;
}

Chrome에서는 스크롤바의 스타일을 지정할 수 있습니다.

::-webkit-scrollbar {
    display: none;
}

이것은 웹 애플리케이션에서 '기본'본문 스크롤링을 사용하려는 경우 매우 유용합니다 overflow-y: scroll. 이는 .

— LG102
소스

이것은 모든 답변에서 나를 위해 일했습니다 :) 감사합니다!

— Gediminas

9

Internet Explorer 6에 대한 지원도 필요한 경우 html을 오버플로하십시오.

$("html").css("overflow", "hidden");

과

$("html").css("overflow", "auto");

— 가윈
소스

5

IE는 스크롤바에 버그가 있습니다. 따라서 둘 중 하나를 원하는 경우 가로 스크롤 막대를 숨기려면 다음을 포함해야합니다.

overflow-x: hidden;
overflow-y:scroll;

세로 숨기기 :

overflow-y: hidden;
overflow-x: scroll;

— 지샨 알리
소스

4

(아직 댓글을 달 수 없지만 이것을 공유하고 싶었습니다) :

Lyncee의 코드는 데스크톱 브라우저에서 저에게 효과적이었습니다. 그러나 iPad (Chrome, iOS 9)에서는 응용 프로그램이 충돌했습니다. 그것을 고치기 위해 나는 변했다.

document.documentElement.style.overflow = ...

에

document.body.style.overflow = ...

내 문제를 해결했습니다.

— 에라스무스 세 데르 나 에스
소스

2

Firefox에는 화살표 키 바로 가기가 있기 때문에 <div>CSS 스타일을 사용 하여 주위에 overflow:hidden;.

— Qvcool
소스

2

JQuery를 사용하면 다음 코드로 스크롤 막대를 비활성화 할 수 있습니다.

$('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
     }
});

또한 다음 코드로 다시 활성화 할 수 있습니다.

 $('body').unbind('mousewheel');

— gtzinos
소스