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?


2
duplikat ze stackoverflow.com/questions/4856746/… który ma lepszą odpowiedź
Daniël Tulp

Odpowiedzi:


9

w twoim css:

iframe{
    overflow:hidden;
}

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.


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


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.


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>


11

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

 1. XHTML => scrolling="no"
 2. HTML5 => seamless="seamless"

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.


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.


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

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


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

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.