Deze code gebruiken
<iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="https://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>
Zo ziet het eruit (de shoutbox op de homepage van http://www.talkjesus.com)
Hoe verwijder ik de horizontale schuifbalk en wijzig ik de css van de verticale schuifbalk?
Antwoord 1, autoriteit 100%
in je css:
iframe{
overflow:hidden;
}
Antwoord 2, autoriteit 94%
Voeg het kenmerk scrolling="no"toe aan het iframe.
Antwoord 3, autoriteit 95%
Dit werkt in alle browsers
<iframe src="https://buythecity.com" scrolling="no" style=" width: 550px; height: 500px; overflow: hidden;" ></iframe>
Antwoord 4, autoriteit 97%
Het toevoegen van scroll="no"en style="overflow:hidden"op iframe werkte niet, ik moest style="overflow:hidden"op hoofdtekst van html-document geladen in iframe.
Antwoord 5, autoriteit 271%
Probeer het kenmerk scrolling="no"toe te voegen, zoals hieronder:
<iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'></iframe>Antwoord 6, autoriteit 271%
Voeg gewoon de kenmerken scrolling="no"en seamless="seamless"toe aan de iframe-tag. zoals dit:-
1. XHTML => scrolling="no"
2. HTML5 => seamless="seamless"
UPDATE:
seamless-kenmerk is verwijderd in alle belangrijke browsers
Antwoord 7, autoriteit 129%
Als iemand hier een probleem heeft met het uitschakelen van schuifbalken op het iframe, kan het zijn dat de inhoud van het iframe schuifbalken heeft op elementen onderde htmlelement!
Sommige lay-outs stellen htmlen bodyin op 100% hoogte en gebruiken een #wrapperdiv met overflow: auto;(of scroll), waardoor het scrollen naar het element #wrapperwordt verplaatst.
In zo’n geval kunt u niets doen om te voorkomen dat de schuifbalken worden weergegeven, behalve het bewerken van de inhoud van de andere pagina.
Antwoord 8, autoriteit 114%
<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>;
Gebruik de bovenstaande div en het zal in geen enkele browser de schuifbalk tonen.
Antwoord 9, autoriteit 114%
Voeg dit toe aan je css om beide schuifbalken te verbergen
iframe
{
overflow-x:hidden;
overflow-Y:hidden;
}
Antwoord 10, autoriteit 71%
Voeg dit toe aan je CSS om alleen de horizontale schuifbalk te verbergen
iframe{
overflow-x:hidden;
}
Antwoord 11, autoriteit 71%
Dit is een laatste redmiddel, maar het vermelden waard –
je kunt het ::-webkit-scrollbarpseudo-element op de bovenliggende iframegebruiken om die beroemde schuifbalken uit de jaren 90 te verwijderen.
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
Bewerken:hoewel het relatief wordt ondersteund, ::-webkit-scrollbaris mogelijk niet geschikt voor alle browsers. voorzichtig gebruiken 🙂
Antwoord 12, autoriteit 71%
iframe {
display: block;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: calc(100% + 17px);
}
div {
overflow-x: hidden;
}
Zo maak je de breedte van het Iframe groter dan het zou moeten zijn.
Vervolgens verberg je de horizontale schuifbalk met overflow-x: hidden.
Antwoord 13
iframe{
overflow:hidden;
}<iframe src="#">