Element iframe HTML - wyłącz przewijanie

Mam następujący element iframe w mojej witrynie:

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe>

I ma paski przewijania.
Jak się ich pozbyć?

Niestety nie wierzę, że jest to możliwe w pełnej zgodności HTML5 z tylko właściwościami HTML i CSS. Na szczęście jednak większość przeglądarek nadal obsługuje tę scrollingwłaściwość (która została usunięta ze specyfikacji HTML5 ).

overflownie jest rozwiązaniem dla HTML5, ponieważ jedyną nowoczesną przeglądarką, która błędnie to obsługuje, jest Firefox.

Obecnym rozwiązaniem byłoby połączenie tych dwóch:

<iframe src="" scrolling="no"></iframe>

iframe {
  overflow: hidden;
}

Ale może to stać się przestarzałe w miarę aktualizacji przeglądarek. Możesz to sprawdzić, aby uzyskać rozwiązanie JavaScript: http://www.christersvensson.com/html-tool/iframe.htm

Edycja: sprawdziłem i scrolling="no"będę działać w IE10, Chrome 25 i Opera 12.12.

Rozwiązałem ten sam problem z tym css:

    pointer-events:none;

Wydaje się, że działa przy użyciu

html, body { overflow: hidden; }

wewnątrz ramki iFrame

edycja: Oczywiście to działa tylko wtedy, gdy masz dostęp do zawartości iframe (co mam w moim przypadku)

Ustaw całą zawartość na:

#yourContent{
 width:100%;
height:100%;  // in you csss
}

Chodzi o to, że przewijanie elementu iframe jest ustawiane przez treść, a NIE przez sam element iframe.

ustaw zawartość na 100% we wnętrzu za pomocą CSS i żądaną dla elementu iframe w HTML

Próbowałem przewijać = „nie” w mojej obecnej przeglądarce (Google Chrome w wersji 60.0.3112.113 (oficjalna kompilacja) (64-bit)) i to nie zadziałało. Jednak scroll = "no" zadziałało. Może warto spróbować

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scroll="no" style="overflow: hidden"></iframe>

Dodaj te style… do tagu iframe…

overflow-x:hidden;
overflow-y:hidden;

Ponieważ "overflow: hidden;" właściwość nie działa poprawnie w samym elemencie iFrame, ale wydaje się dawać wyniki po zastosowaniu do treści strony wewnątrz elementu iFrame, próbowałem tego:

iframe body { overflow:hidden; }

Który niespodziewanie zrobił z Firefoksem, usunięcie tych irytujących przewijania.

Jednak w Safari dziwna, przezroczysta linia o szerokości 2 pikseli pojawiła się po prawej stronie elementu iframe, między jego zawartością a obramowaniem. Dziwne.

Po prostu dodaj element iframe w stylu dowolnej z poniższych opcji. Mam nadzieję, że to rozwiązuje problem.

1 opcja:

<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>

2. opcja:

<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>

To działa dla mnie:

<style>
*{overflow:hidden!important;}
html{overflow:scroll!important;}
</style>

Uwaga: jeśli potrzebujesz paska przewijania w jakimkolwiek innym elemencie, dodaj również css {overflow:scroll!important;}do tego elementu

W przypadku tej ramy:

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

Wypróbowałem to na moim kodzie CSS:

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

poniżej wersji html5

iframe {
    overflow:hidden;
}

W html5

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


iframe[seamless]{

   overflow: hidden;
}

ale nie jest jeszcze obsługiwany poprawnie

Możesz użyć następującego kodu CSS:

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

Aby ograniczyć widok elementu iframe.