iframe에서 가로 스크롤바를 숨기시겠습니까?

110

css, jquery 또는 js를 사용하여 iframe에서 수평 스콜 바를 숨겨야합니다.

— nkcmr
소스

1

가능한 중복 : 사파리 / 크롬 (웹킷) - iframe이에게 수직 스크롤 숨길 수 없습니다 및 다른 사람

— 매트 볼

iframe이 상위 페이지와 동일한 도메인에 없습니다.

— nkcmr 2011 년

overflow-y : 숨김; Chrome, Safari 및 Opera에서 작동하지 않습니다. 그것을 시도 jsfiddle.net/m5Btd/3

— phangia2712

208

나는 이것을 조합하여 이것을 제안하고 싶다.

CSS overflow-y: hidden;
scrolling="no" (HTML4 용)
~~및 seamless="seamless"(HTML5의 경우)~~*

^{*이 seamless속성은 표준에서 제거 되었으며 지원하는 브라우저가 없습니다 .}

.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}

<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>

스 니펫 확장

— 체이스 플 로렐
소스

9

Chrome 15에 예제를로드했는데 여전히 스크롤바가 보입니다.

— Dan

61

scrolling="no"iframe에 속성을 추가하면 Chrome에서 스크롤바가 제거되는 것 같습니다.

— Nick

2

@Nick 적어도 내 컴퓨터에서는 크롬에서 제거하지 않습니다. img339.imageshack.us/img339/6685/chromelj.png

— l46kok

1

@ l46kok 스크린 샷은 포함되지 않습니다scrolling="no"

— 체이스 Florell

3

이 속성은 현재 주요 브라우저에서 지원되지 않습니다 . caniuse.com/#feat=iframe-seamless

— Liyali

26

scrolling="no"iframe에서 속성을 설정 하십시오.

— 라훌 다 디히
소스

15

내부 문서의 코드를 변경할 수 iframe있고 해당 콘텐츠가 상위 창을 통해서만 표시되는 경우 다음 CSS를에 추가하기 만하면됩니다 iframe.

body {
    overflow:hidden;
}

다음은 매우 간단한 예입니다.

http://jsfiddle.net/u5gLoav9/

이 솔루션을 사용하면 다음을 수행 할 수 있습니다.

에 scrolling="no"속성 iframe이 필요하지 않으므로 HTML5를 유효하게 유지하십시오 (HTML5 의이 속성은 더 이상 사용되지 않음).
CSS overflow : hidden을 사용하여 대부분의 브라우저에서 작동합니다 .
JS 또는 jQuery가 필요하지 않습니다.

노트:

스크롤 막대를 가로로 허용하지 않으려면 대신 다음 CSS를 사용하십시오.

overflow-x: hidden;

— GibboK
소스

2

이 답변은 Bootstrap을 사용하는 웹 사이트에만 적용됩니다. 부트 스트랩의 반응 형 임베드 기능은 스크롤바를 처리합니다.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>

jsfiddle : http://jsfiddle.net/00qggsjj/2/

http://getbootstrap.com/components/#responsive-embed

— 라잔 폴
소스