IT박스

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

itboxs 2020. 7. 30. 10:12
반응형

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


CSS, jquery 또는 js를 사용하여 iframe에서 가로 scollbar를 숨겨야합니다.


나는 이것을 조합하여 제안하는 것이 좋습니다

  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

참고 URL : https://stackoverflow.com/questions/4856746/hide-horizontal-scrollbar-on-an-iframe

반응형