iframe에서 스크롤바 제거
이 코드 사용
<iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="1" marginwidth="1" name="cboxmain" id="cboxmain" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
이것이 어떻게 나타나는지 ( http://www.talkjesus.com 홈페이지의 shoutbox )
가로 스크롤바를 제거하고 세로 스크롤바의 CSS를 수정하려면 어떻게해야합니까?
귀하의 CSS에서 :
iframe{
overflow:hidden;
}
scrolling="no"
iframe에 속성을 추가 합니다.
이것은 모든 브라우저에서 작동합니다. jsfiddle 여기 http://jsfiddle.net/zvhysct7/1/
<iframe src="http://buythecity.com" scrolling="no" style=" width: 550px; height: 500px; overflow: hidden;" ></iframe>
추가 scroll="no"
및 style="overflow:hidden"
iframe이 작동하지 않아 style="overflow:hidden"
iframe 내부에로드 된 html 문서의 본문 을 추가해야했습니다 .
iframe 태그에 scrolling="no"
및 seamless="seamless"
속성을 추가하기 만하면 됩니다. 이렇게 :-
1. XHTML => scrolling="no"
2. HTML5 => seamless="seamless"
<div id="myInfoDiv" seamless="seamless" scrolling="no" style="width:100%; height: 100%; float: left; color: #FFF; background:#ed8719; line-height:100%; font-size:100%; font-family: sans-serif>;
위의 div를 사용하면 어떤 브라우저에서도 스크롤 막대가 표시되지 않습니다.
두 스크롤 막대를 숨기려면 CSS에 이것을 추가하십시오.
iframe
{
overflow-x:hidden;
overflow-Y:hidden;
}
여기있는 사람이에서 스크롤바를 비활성화하는 데 문제 iframe
가있는 경우 iframe의 콘텐츠에 요소 아래 의 html
요소 에 스크롤바가 있기 때문일 수 있습니다 .
일부 레이아웃 은 100 % 높이로 설정 html
되고 (또는 ) 과 함께 div를 body
사용 하여 스크롤을 요소로 이동합니다 .#wrapper
overflow: auto;
scroll
#wrapper
이러한 경우 다른 페이지의 내용을 편집하는 것 외에는 스크롤바가 표시되지 않도록하는 조치가 없습니다.
scrolling="no"
아래와 같은 속성을 추가해보십시오 .
<iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'></iframe>
가로 스크롤 막대 만 숨기려면 CSS에 이것을 추가하십시오.
iframe{
overflow-x:hidden;
}
이것은 최후의 수단이지만 언급 할 가치가 있습니다. 의 부모 ::-webkit-scrollbar
에있는 가상 요소를 사용하여 iframe
유명한 90 년대 스크롤 막대를 제거 할 수 있습니다.
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
편집 : 그것이 비록 상대적으로 지원 , ::-webkit-scrollbar
모든 브라우저에 적합하지 않을 수 있습니다. 주의해서 사용하십시오 :)
iframe {
display: block;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: calc(100% + 17px);
}
div {
overflow-x: hidden;
}
이와 같이 Iframe의 너비를 예상보다 크게 만듭니다. 그런 다음 overflow-x : hidden으로 수평 스크롤바를 숨 깁니다.
참고 URL : https://stackoverflow.com/questions/10082155/remove-scrollbar-from-iframe
'program tip' 카테고리의 다른 글
Firefox는 selected = "selected"옵션을 무시합니다. (0) | 2020.08.14 |
---|---|
Pandas는 데이터 프레임을 튜플 배열로 변환합니다. (0) | 2020.08.14 |
기본 인증이있는 경우 Node.js에서 http.client를 사용하는 방법 (0) | 2020.08.14 |
HTML 래퍼없이 DOMDocument의 HTML을 저장하는 방법은 무엇입니까? (0) | 2020.08.14 |
플러그인 설치를 위해 내 FTP 자격 증명을 요구하는 WordPress (0) | 2020.08.14 |