반응형
iframe에서 가로 스크롤 막대를 숨기시겠습니까?
CSS, jquery 또는 js를 사용하여 iframe에서 가로 scollbar를 숨겨야합니다.
나는 이것을 조합하여 제안하는 것이 좋습니다
- 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>
scrolling="no"
iframe에서 속성을 설정 하십시오.
내부의 문서 코드를 변경할 수 iframe
있고 해당 컨텐츠가 상위 창을 통해서만 표시되는 경우 다음 CSS를 추가하십시오 iframe
.
body {
overflow:hidden;
}
다음은 매우 간단한 예입니다.
이 솔루션을 통해 다음을 수행 할 수 있습니다.
의
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
반응형
'IT박스' 카테고리의 다른 글
위도 또는 경도를 미터로 변환하는 방법? (0) | 2020.07.30 |
---|---|
트위터의 부트 스트랩 2.1.0에서 새로운 접사 플러그인을 사용하는 방법은 무엇입니까? (0) | 2020.07.30 |
안드로이드 버튼 선택기 (0) | 2020.07.30 |
자바 스크립트로 텍스트 선택 지우기 (0) | 2020.07.30 |
리터럴 키로 PHP 접두사 연관 배열? (0) | 2020.07.30 |