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

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