HTML iframe-스크롤 비활성화

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;

---

html5 버전 이하

iframe {
    overflow:hidden;
}

HTML5에서

<iframe seamless="seamless"  ....>


iframe[seamless]{

   overflow: hidden;
}

그러나 아직 올바르게 지원되지 않음

---

Since the "overflow: hidden;" property does not properly work on the iFrame itself, but seems to give results when applied to the body of the page inside the iFrame, I tried this :

iframe body { overflow:hidden; }

Which surprisingly did work with Firefox, removing those annoying scrollbars.

In Safari though, a weird 2-pixels-wide transparent line has appeared on the right side of the iframe, between its contents and its border. Strange.

---

Just add an iframe styled like either option below. I hope this solves the problem.

1st option:

<iframe src="https://www.skyhub.ca/featured-listing" style="position: absolute; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>

2nd option:

<iframe src="https://www.skyhub.ca/featured-listing" style="display: none;" onload="this.style.display='block';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>

---

For this frame:

    <iframe src="" name="" id=""></iframe>

I tried this on my css code:

    iframe#put the value of id here::-webkit-scrollbar {
         display: none;
    }

---

You can use the following CSS code:

margin-top: -145px; 
margin-left: -80px;
margin-bottom: -650px;

In order to limit the view of the iframe.

참고URL : https://stackoverflow.com/questions/15494568/html-iframe-disable-scroll