HTML iframe – scroll uitschakelen

Ik heb het volgende iframe op mijn site:

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

En het heeft schuifbalken.
Hoe kom je er vanaf?

Antwoord 1, autoriteit 100%

Helaas geloof ik niet dat het mogelijk is om HTML5 volledig conform te maken met alleen HTML- en CSS-eigenschappen. Gelukkig ondersteunen de meeste browsers echter nog steeds de eigenschap scrolling(die is verwijderd uit de HTML5-specificatie).

overflowis geen oplossing voor HTML5 aangezien Firefox de enige moderne browser is die ten onrechtedit ondersteunt.

Een huidige oplossing zou zijn om de twee te combineren:

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

iframe {
  overflow: hidden;
}

Maar dit kan verouderd raken als de browser wordt bijgewerkt. Misschien wilt u dit controleren voor een JavaScript-oplossing: http://www.christersvensson.com/ html-tool/iframe.htm

Bewerken:ik heb het gecontroleerd en scrolling="no"werkt in IE10, Chrome 25 en Opera 12.12.

Antwoord 2, autoriteit 12%

Ik heb hetzelfde probleem opgelost met deze css:

   pointer-events:none;

Antwoord 3, autoriteit 7%

Het lijkt te werken met

html, body { overflow: hidden; }

binnenhet IFrame

bewerken:
Dit werkt natuurlijk alleen als je toegang hebt tot de inhoud van het Iframe (wat ik in mijn geval heb)

Antwoord 4

Stel alle inhoud in op:

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

Het punt is dat de iframe-scroll wordt ingesteld door de inhoud en NIET door de iframe zelf.

zet de inhoud in het interieur op 100% met CSS en het gewenste voor het iframe in HTML

Antwoord 5

Ik heb geprobeerd te scrollen=”no” in mijn huidige browser (Google Chrome-versie 60.0.3112.113 (officiële versie) (64-bits)) en dat werkte niet. Scroll=”no” werkte echter wel. Misschien het proberen waard

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

Antwoord 6

Voeg deze stijlen toe..voor uw iframe-tag..

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

Antwoord 7

Aangezien de eigenschap “overflow: hidden;”niet goed werkt op het iFrame zelf, maar resultaten lijkt te geven wanneer deze wordt toegepast op de hoofdtekst van de pagina inde iFrame, ik heb dit geprobeerd:

iframe body { overflow:hidden; }

Wat verrassend genoeg werktemet Firefox, en die vervelende schuifbalken verwijderde.

In Safari is echter een rare 2-pixels-brede transparante lijn verschenen aan de rechterkant van de IFRAME, tussen de inhoud en de grens. Vreemd.

Antwoord 8

Dit werkt voor mij:

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

Opmerking: als u scrollbar in een ander element nodig hebt, voegt ook CSS {overflow:scroll!important;}op dat element

Antwoord 9

Voeg gewoon een IFRAME stijl toe zoals hieronder optie. Ik hoop dat dit het probleem oplost.

1e optie:

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

2e optie:

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

Antwoord 10

Voor dit frame:

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

Ik heb dit geprobeerd op mijn CSS-code:

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

Antwoord 11

Hieronder HTML5-versies

iframe {
    overflow:hidden;
}

In html5

<iframe seamless="seamless"  ....>
iframe[seamless]{
   overflow: hidden;
}

maar nog niet correct ondersteund

Antwoord 12

U kunt de volgende CSS-code gebruiken:

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

Om de weergave van het iframe te beperken.