ซ่อนแถบเลื่อนแนวนอนบน iframe หรือไม่

110

ฉันต้องการซ่อนแถบแนวนอนบน iframe โดยใช้ css, jquery หรือ js

— nkcmr
แหล่งที่มา

1

อาจซ้ำกันได้: Safari / Chrome (Webkit) - ไม่สามารถซ่อนแถบเลื่อนแนวตั้ง iframeและอื่น ๆ ได้

— Matt Ball

iframe ไม่ได้อยู่บนโดเมนเดียวกับเพจหลัก

— nkcmr

ล้น -y: ซ่อน; ไม่ทำงานใน Google Chrome, Safari และ Opera ลองกับjsfiddle.net/m5Btd/3

— phangia2712

208

ฉันขอแนะนำให้ทำสิ่งนี้ด้วยการรวมกันของ

CSS overflow-y: hidden;
scrolling="no" (สำหรับ HTML4)
~~และseamless="seamless"(สำหรับ HTML5)~~*

^{* seamlessแอตทริบิวต์ถูกลบออกจากมาตรฐานและไม่มีเบราว์เซอร์ใดรองรับ}

.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}

<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>

ขยายข้อมูลโค้ด

— Chase Florell
แหล่งที่มา

9

ฉันโหลดตัวอย่างของคุณบน Chrome 15 แล้ว แต่ยังเห็นแถบเลื่อน

— แดน

61

การเพิ่มscrolling="no"แอตทริบิวต์ลงใน iframe ดูเหมือนว่าจะลบแถบเลื่อนใน Chrome

— นิค

2

@ นิคมันไม่ได้ลบมันบน chrome อย่างน้อยก็ในคอมพิวเตอร์ของฉัน img339.imageshack.us/img339/6685/chromelj.png

— l46kok

1

@ l46kok ภาพหน้าจอของคุณไม่รวมscrolling="no"

— Chase Florell

3

โปรดทราบว่าแอตทริบิวต์ seemless อยู่ในขณะนี้ไม่ได้รับการสนับสนุนโดยใด ๆ ของเบราว์เซอร์ที่สำคัญ caniuse.com/#feat=iframe-se seamless

— Liyali

26

ตั้งค่าscrolling="no"แอตทริบิวต์ใน iframe ของคุณ

— ราหุลดูดิช
แหล่งที่มา

15

หากคุณได้รับอนุญาตให้เปลี่ยนรหัสของเอกสารภายในของคุณiframeและเนื้อหานั้นสามารถมองเห็นได้โดยใช้หน้าต่างหลักเท่านั้นเพียงแค่เพิ่ม CSS ต่อไปนี้ในiframe:

body {
    overflow:hidden;
}

นี่คือตัวอย่างง่ายๆ:

http://jsfiddle.net/u5gLoav9/

โซลูชันนี้ช่วยให้คุณ:

ทำให้ HTML5 ของคุณถูกต้องเนื่องจากไม่จำเป็นต้องมีscrolling="no"แอตทริบิวต์บนiframe(แอตทริบิวต์นี้ใน HTML5 เลิกใช้แล้ว)
ทำงานบนเบราว์เซอร์ส่วนใหญ่ที่ใช้ CSS overflow: hidden
ไม่จำเป็นต้องใช้ JS หรือ jQuery

หมายเหตุ:

หากต้องการไม่อนุญาตแถบเลื่อนในแนวนอนให้ใช้ CSS นี้แทน:

overflow-x: hidden;

— GibboK
แหล่งที่มา

2

คำตอบนี้ใช้ได้เฉพาะกับเว็บไซต์ที่ใช้ 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

— ราซานพอล
แหล่งที่มา