Да се ​​скрие хоризонталната лента за превъртане на iframe?

Трябва да скрия хоризонталната лента за превъртане на iframe с помощта на css, jquery или js.


html iframe hide scrollbar
person nkcmr    schedule 31.01.2011    source източник
comment
възможен дубликат: Safari/Chrome (Webkit) - Не може да се скрие вертикалната лента за превъртане на iframe и други   -  person Matt Ball    schedule 01.02.2011
comment
iframe не е в същия домейн като родителската страница.   -  person nkcmr    schedule 01.02.2011
comment
преливане-y: скрито; Не работи в Google Chrome, Safari и Opera. Опитайте с jsfiddle.net/m5Btd/3   -  person phangia2712    schedule 13.03.2012

Отговори (4)


arrow_upward
210
arrow_downward

Бих предложил да направите това с комбинация от

  1. CSS overflow-y: hidden;
  2. scrolling="no" (за HTML4)
  3. и seamless="seamless" (за HTML5)*

* Атрибутът seamless е премахнат от стандарта и нито един браузър не го поддържа.

.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}
<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>

person Chase Florell    schedule 31.01.2011
comment
Заредих вашия пример на Chrome 15 и все още виждам лентите за превъртане. - person Dan; 18.12.2011
comment
Добавянето на атрибута scrolling="no" към iframe изглежда премахва лентите за превъртане в Chrome. - person Nick; 13.02.2012
comment
@Nick Не го премахва в chrome, поне на моя компютър. img339.imageshack.us/img339/6685/chromelj.png - person l46kok; 06.02.2013
comment
@l46kok вашата екранна снимка не включва scrolling="no" - person Chase Florell; 06.02.2013
comment
О.. Току-що щракнах върху връзката в отговора и предположих, че превъртане=не вече е там.. жалко, че не проверих - person l46kok; 06.02.2013
comment
Като забележка: scrolling="no" вече не се поддържа в HTML5. Така че предложеният CSS начин или атрибутът seamless< /a> (ако се поддържа) са по-добри решения. - person insertusernamehere; 02.07.2014
comment
благодаря @insertusernameтук, актуализирах отговора, за да отрази този нов маркер. - person Chase Florell; 03.07.2014
comment
Имайте предвид, че атрибутът seemless в момента не се поддържа от нито един от основните браузъри. caniuse.com/#feat=iframe-seamless - person Liyali; 10.10.2014
comment
Безпроблемният атрибут изглежда е премахнат през януари 2016 г.: github.com/whatwg/html /issues/331#issuecomment-173923225 - person sanzante; 09.03.2016
comment
Това не работи динамично. Атрибутите трябва да са там, преди да се зареди iframe. Ако зададете динамично атрибутите, лентата за превъртане няма да изчезне, докато не опресните iframe. Някакви идеи? - person Maciej Krawczyk; 19.03.2016

arrow_upward
26
arrow_downward

задайте атрибут scrolling="no" във вашия iframe.

person Rahul Dadhich    schedule 10.05.2013
comment
Въпреки че се радва на широка поддръжка, според MDN, атрибутът scrolling е остарял. - person JamesQMurphy; 01.05.2021

arrow_upward
15
arrow_downward

Ако ви е позволено да промените кода на документа във вашия iframe и това съдържание е видимо само чрез неговия родителски прозорец, просто добавете следния CSS във вашия iframe:

body {
    overflow:hidden;
}

Ето един много прост пример:

http://jsfiddle.net/u5gLoav9/

Това решение ви позволява да:

  • Поддържайте HTML5 валиден, тъй като не се нуждае от атрибут scrolling="no" на iframe (този атрибут в HTML5 е отхвърлен).

  • Работи в повечето браузъри, използващи CSS overflow:hidden

  • Не са необходими JS или jQuery.

Бележки:

За да забраните хоризонталните ленти за превъртане, използвайте вместо това този CSS:

overflow-x: hidden;
person GibboK    schedule 23.04.2015

arrow_upward
2
arrow_downward

Този отговор е приложим само за уебсайтове, които използват Bootstrap. Отзивчивата функция за вграждане на Bootstrap се грижи за лентите за превъртане.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>

jsfiddle: http://jsfiddle.net/00qggsjj/2/

http://getbootstrap.com/components/#responsive-embed

person Razan Paul    schedule 12.02.2015