[html] HTML iframe-스크롤 비활성화
내 사이트에 다음 iframe이 있습니다.
<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe>
그리고 스크롤 막대가 있습니다.
그들을 제거하는 방법?
답변
안타깝게도 HTML 및 CSS 속성만으로 HTML5를 완전히 준수하는 것이 가능하다고 생각하지 않습니다. 그러나 다행히도 대부분의 브라우저는 HTML5 사양scrolling
에서 제거 된 속성을 여전히 지원합니다 .
overflow
이것은 Firefox 를 잘못 지원 하는 유일한 최신 브라우저이기 때문에 HTML5에 대한 해결책이 아닙니다 .
현재 해결책은 다음 두 가지를 결합하는 것입니다.
<iframe src="" scrolling="no"></iframe>
iframe {
overflow: hidden;
}
그러나 이것은 브라우저가 업데이트되면 쓸모 없게 될 수 있습니다. JavaScript 솔루션을 확인하려면 http://www.christersvensson.com/html-tool/iframe.htm
편집 :scrolling="no"
IE10, Chrome 25 및 Opera 12.12에서 확인하고 작동합니다.
답변
이 CSS로 동일한 문제를 해결했습니다.
pointer-events:none;
답변
사용하여 작동하는 것 같습니다.
html, body { overflow: hidden; }
IFrame 내부
편집 : 물론 이것은 Iframe의 콘텐츠에 대한 액세스 권한이있는 경우에만 작동합니다 (제 경우에는)
답변
모든 콘텐츠를 다음으로 설정합니다.
#yourContent{
width:100%;
height:100%; // in you csss
}
문제는 iframe 스크롤이 iframe 자체가 아닌 콘텐츠에 의해 설정된다는 것입니다.
CSS를 사용하여 내부의 내용을 100 %로 설정하고 HTML의 iframe에 원하는 내용을 설정합니다.
답변
현재 브라우저 (Google Chrome 버전 60.0.3112.113 (공식 빌드) (64 비트))에서 scrolling = “no”를 시도했지만 작동하지 않았습니다. 그러나 scroll = “no”는 작동했습니다. 시도 할 가치가있을 수 있습니다.
<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scroll="no" style="overflow: hidden"></iframe>
답변
iframe 태그에이 스타일을 추가합니다 ..
overflow-x:hidden;
overflow-y:hidden;
답변
이후 “오버 플로우 : 숨겨진;” 속성이 iFrame 자체에서 제대로 작동하지 않지만 iFrame 내부 의 페이지 본문에 적용될 때 결과를 제공하는 것 같습니다 .
iframe body { overflow:hidden; }
어떤 의외로 했던 그 성가신 스크롤바를 제거, 파이어 폭스와 함께 일을.
그러나 Safari에서는 내용과 테두리 사이의 iframe 오른쪽에 이상한 2 픽셀 너비의 투명한 선이 나타납니다. 이상한.