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

Html / 글쓴이

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

답변

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

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

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

.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}
<iframe src="https://bing.com"
        class="foo"
        scrolling="no" >
</iframe>

스 니펫 확장

답변

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

답변

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

body {
    overflow:hidden;
}

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

http://jsfiddle.net/u5gLoav9/

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

  • 에 scrolling="no"속성 iframe이 필요하지 않으므로 HTML5를 유효하게 유지하십시오 (HTML5 의이 속성은 더 이상 사용되지 않음).

  • CSS overflow : hidden을 사용하여 대부분의 브라우저에서 작동합니다 .

  • JS 또는 jQuery가 필요하지 않습니다.

노트:

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

overflow-x: hidden;

답변

이 답변은 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

답변