Usuń pasek przewijania z iframe

117

Używając tego kodu

<iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="http://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>

Tak to wygląda (shoutbox na stronie głównej http://www.talkjesus.com )

Jak usunąć poziomy pasek przewijania i zmodyfikować css pionowego paska przewijania?

html css iframe Wiara w rzeczy niewidzialne
źródło
2
duplikat ze stackoverflow.com/questions/4856746/… który ma lepszą odpowiedź
Daniël Tulp

Odpowiedzi:

9

w twoim css:

iframe{
    overflow:hidden;
}
takien
źródło
7
Dzięki, ale tylko przewijanie w poziomie i nadal pojawia się w przeglądarce Firefox. Nie pojawia się w Chrome ani IE. Ponadto CSS dla paska przewijania jest skutecznie stosowany tylko w IE, a nie w FF ani w Chrome (drugi pokazuje domyślnie wyglądające beżowe kolory / odcienie).
Faith In Unseen Things
3
To nie zadziała, ponieważ przepełnienie występuje w dokumencie iframe, którego zwykle nie można zmodyfikować z powodu ograniczeń zabezpieczeń międzydomenowych elementów iframe.
thdoan
54
To nie działa, ponieważ nie wpłynie to na zawartość elementu iframe, tylko sam element iframe. Rozwiązaniem jest scrolling = „nie”.
TheLD
4
To jest nieprawidłowa odpowiedź, nie usuwa pasków przewijania w Google Chrome, ale scrolling = "nie" tak.
Anders Lindén
@LarsVandeDonk Twoja odpowiedź powinna być poprawnym rozwiązaniem.
Wong Jia Hau
313

Dodaj scrolling="no"atrybut do elementu iframe.

PROSPEROWAĆ
źródło
1
w stanie to zrobić z css?
Evorlor,
1
Tak, ale w Chrome nie można używać scrollIntoView. Zobacz code.google.com/p/chromium/issues/detail?id=137214
Peter Brand,
1
cóż, to ukrywa pasek przewijania treści i zapobiega przewijaniu treści. nie zapobiega wyświetlaniu się paska przewijania elementu iframe.
Dave Cousineau
3
Atrybut przewijania elementu iframe jest teraz oficjalnie przestarzały. Zamiast tego należy użyć CSS.
Mike Poole
4
@MikePoole To może być oficjalnie przestarzałe, ale nie pomogło w ustawieniu overflow:hidden;w Chrome 65.0.3325.181, ale scrolling="no"pomogło.
około
28

Działa to we wszystkich przeglądarkach. jsfiddle tutaj http://jsfiddle.net/zvhysct7/1/

<iframe src="http://buythecity.com"  scrolling="no" style=" width: 550px; height: 500px;  overflow: hidden;" ></iframe>
Thyagarajan C
źródło
21

Dodawanie scroll="no"i style="overflow:hidden"na iframe nie działało, musiałem dodać style="overflow:hidden"treść dokumentu html załadowanego wewnątrz iframe.

nirvana74v
źródło
1
Jeśli to pomoże, występuje problem w Firefoksie, gdzie jeśli masz element CSS transform: scale(0.7)lub coś podobnego , spowoduje to utworzenie pasków przewijania (które pojawią się w Twoim elemencie iFrame), chyba że przypniesz go overflow: hidden;do przodka (może to być element div zamiast ciało).
WraithKenny
8
Dzieje się tak, ponieważ jest to „scrolling = no”, a nie „scroll = no”.
Bryan Green,
masz na myśli załadowany w naszym załadowanym wokół? Co jest wokół czego?
João Pimentel Ferreira
załadowany wewnątrz <iframe src = "/ test.html">, gdzie test.html ma to ustawienie.
nirvana74v
16

Spróbuj dodać scrolling="no"atrybut jak poniżej:

<iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'></iframe>
Rozwiń fragment

Allabux B
źródło
11

Po prostu dodaj atrybuty scrolling="no"i seamless="seamless"do tagu iframe. lubię to:-

 1. XHTML => scrolling="no"
 2. HTML5 => seamless="seamless"
Nima Rahbar
źródło
13
Atrybut bezszwowy został usunięty z HTML .
neopickaze
Musisz użyć css zamiast bezszwowego atrybutu.
Nima Rahbar
@NimaRahbar Atrybut bezszwowy może być przestarzały, ale css nie obsługuje parametrów iframe.
Opuszczony
9

Jeśli ktoś tu jest problem z przewijania na wyłączenie iframe, możliwe że zawartość iframe zawiera paski przewijania na elementach poniżej w htmlelemencie!

Niektóre układy ustawienia htmli bodydo 100% wysokości i użyć #wrapperdiv z overflow: auto;(i scroll), tym samym przesuwając przewijania do #wrapperelementu.

W takim przypadku nic, co robisz, nie zapobiegnie wyświetlaniu się pasków przewijania, z wyjątkiem edycji zawartości drugiej strony.

WraithKenny
źródło
8 
<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>;

Użyj powyższego div, a nie wyświetli paska przewijania w żadnej przeglądarce.

KnightFury
źródło
3
seamlessatrybut nie jest prawidłowym HTML5, nie jest obsługiwany przez większość przeglądarek ( caniuse.com/#search=se Seamless ), a większość innych stylów jest niepotrzebna.
Pere
8

Dodaj to do swojego css, aby ukryć oba paski przewijania

iframe 
{
  overflow-x:hidden;
  overflow-Y:hidden;
}
Deepika Patel
źródło
6

Jest to ostateczność, ale warto o tym wspomnieć - możesz użyć ::-webkit-scrollbarpseudoelementu iframerodzica, aby pozbyć się tych słynnych pasków przewijania z lat 90.

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

Edycja: chociaż jest stosunkowo obsługiwana , ::-webkit-scrollbarmoże nie pasować do wszystkich przeglądarek. Używaj ostrożnie :)

DotBot
źródło
2
To jedyna odpowiedź, która mi pomogła. Nadal możesz przewijać, ale nie widzisz brzydkiego paska przewijania. Dziękuję Ci!
Karmidżanow
4

Dodaj to do swojego css, aby ukryć tylko poziomy pasek przewijania

iframe{
    overflow-x:hidden;
}
Abhidev
źródło
3 
iframe {
  display: block;
  border: none;         /* Reset default border */
  height: 100vh;        /* Viewport-relative units */
  width: calc(100% + 17px);
}
div {
  overflow-x: hidden;
}

W ten sposób zwiększasz szerokość elementu iframe niż powinna. Następnie ukrywasz poziomy pasek przewijania za pomocą overflow-x: hidden.

Nico Grill
źródło