ลบแถบเลื่อนออกจาก iframe

117

โดยใช้รหัสนี้

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

นี่คือลักษณะที่ปรากฏ (กล่องข้อความบนหน้าแรกของhttp://www.talkjesus.com )

ฉันจะลบแถบเลื่อนแนวนอนและแก้ไข css ของแถบเลื่อนแนวตั้งได้อย่างไร

html css iframe

— ศรัทธาในสิ่งที่มองไม่เห็น
แหล่งที่มา

2

ทำซ้ำด้วยstackoverflow.com/questions/4856746/…ซึ่งมีคำตอบที่ดีกว่า

— Daniël Tulp

9

ใน css ของคุณ:

iframe{
    overflow:hidden;
}

— ตะเคียน
แหล่งที่มา

7

ขอบคุณ แต่เลื่อนในแนวนอนเท่านั้นและยังคงปรากฏใน Firefox ไม่ปรากฏใน Chrome หรือ IE นอกจากนี้ CSS สำหรับแถบเลื่อนยังถูกนำไปใช้อย่างมีประสิทธิภาพใน IE เท่านั้นไม่ใช่ FF หรือ Chrome (หลังจะแสดงสี / เฉดสีเบจเริ่มต้น)

— ศรัทธาในสิ่งที่มองไม่เห็น

3

การดำเนินการนี้จะใช้ไม่ได้เนื่องจากการล้นเกิดขึ้นในเอกสาร iframe ซึ่งโดยทั่วไปคุณจะไม่สามารถแก้ไขได้เนื่องจากข้อ จำกัด ด้านความปลอดภัยของ iframe ข้ามโดเมน

— thdoan

54

วิธีนี้ใช้ไม่ได้เนื่องจากจะไม่ส่งผลกระทบต่อเนื้อหาของ iframe เพียง แต่ตัว iframe เอง วิธีแก้ปัญหาคือการเลื่อน = "ไม่"

— TheLD

4

นี่เป็นคำตอบที่ไม่ถูกต้องไม่ได้ลบแถบเลื่อนใน Google Chrome แต่ scrolling = "no" ทำ

— Anders Lindén

@LarsVandeDonk คำตอบของคุณน่าจะเป็นทางออกที่ถูกต้อง

— Wong Jia Hau

314

เพิ่มscrolling="no"แอตทริบิวต์ให้กับ iframe

— เจริญเติบโต
แหล่งที่มา

1

สามารถทำได้ด้วย css?

— Evorlor

1

ใช่ แต่ใน Chrome ไม่สามารถใช้ scrollIntoView ได้ ดูcode.google.com/p/chromium/issues/detail?id=137214

— Peter Brand

1

ซึ่งจะซ่อนแถบเลื่อนของเนื้อหาและป้องกันการเลื่อนเนื้อหา มันไม่ได้ป้องกันไม่ให้แถบเลื่อนของ iframe ปรากฏขึ้น

— Dave Cousineau

3

ขณะนี้แอตทริบิวต์การเลื่อนบน iframe ล้าสมัยอย่างเป็นทางการ ควรใช้ CSS แทน

— Mike Poole

4

@MikePoole อาจล้าสมัยอย่างเป็นทางการ แต่ไม่ได้ช่วยในการตั้งค่าoverflow:hidden;Chrome 65.0.3325.181 แต่scrolling="no"ช่วยได้

— บาง

28

สิ่งนี้ใช้ได้กับทุกเบราว์เซอร์ jsfiddle ที่นี่http://jsfiddle.net/zvhysct7/1/

<iframe src="http://buythecity.com"  scrolling="no" style=" width: 550px; height: 500px;  overflow: hidden;" ></iframe>

— Thyagarajan C.
แหล่งที่มา

21

การเพิ่มscroll="no"และstyle="overflow:hidden"บน iframe ไม่ได้ผลฉันต้องเพิ่มstyle="overflow:hidden"เนื้อหาของเอกสาร html ที่โหลดภายใน iframe

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

1

หากสิ่งนี้ช่วยได้มีปัญหาใน Firefox ซึ่งหากคุณมี CSS องค์ประกอบtransform: scale(0.7)หรือสิ่งนั้นจะสร้างแถบเลื่อน (ซึ่งจะปรากฏใน iFrame ของคุณ) เว้นแต่คุณจะตัดoverflow: hidden;ต่อกับบรรพบุรุษ (อาจเป็น div แทน ร่างกาย).

— WraithKenny

8

นั่นเป็นเพราะ 'scrolling = no' ไม่ใช่ 'scroll = no'

— Bryan Green

คุณหมายถึงโหลดภายในของเราโหลดรอบ? สิ่งที่อยู่รอบ ๆ คืออะไร?

— João Pimentel Ferreira

โหลดภายใน <iframe src = "/ test.html"> โดยที่ test.html มีการตั้งค่านี้

— n Nirvana74v

16

ลองเพิ่มscrolling="no"แอตทริบิวต์ดังต่อไปนี้:

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

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

— Allabux B
แหล่งที่มา

11

เพียงเพิ่มscrolling="no"และseamless="seamless"แอตทริบิวต์แท็ก iframe แบบนี้:-

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

— นิมาราห์บาร์
แหล่งที่มา

13

แอตทริบิวต์ที่ไร้รอยต่อถูกลบออกจาก HTMLแล้ว

— neopickaze

คุณต้องใช้ css แทนแอตทริบิวต์ที่ไร้รอยต่อ

— Nima Rahbar

@NimaRahbar แอตทริบิวต์ที่ไร้รอยต่ออาจล้าสมัย แต่ css ไม่รองรับพารามิเตอร์ iframe

— รถเข็นที่ถูกทิ้ง

9

ถ้าใครที่นี่จะมีปัญหากับการปิดใช้งานบนเลื่อนที่iframeมันอาจจะเป็นเพราะเนื้อหาของ iframe มีเลื่อนในองค์ประกอบด้านล่างhtmlองค์ประกอบ!

เลย์เอาต์บางรายการตั้งค่าhtmlและbodyมีความสูง 100% และใช้#wrapperdiv กับoverflow: auto;(หรือscroll) ด้วยเหตุนี้การเลื่อนการเลื่อนไปยัง#wrapperองค์ประกอบ

ในกรณีนี้คุณไม่ต้องทำอะไรเลยที่จะป้องกันไม่ให้แถบเลื่อนปรากฏขึ้นยกเว้นการแก้ไขเนื้อหาของหน้าอื่น

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

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

ใช้ div ด้านบนและจะไม่แสดงแถบเลื่อนในเบราว์เซอร์ใด ๆ

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

3

seamlessแอตทริบิวต์ไม่ใช่ HTML5 ที่ถูกต้องเบราว์เซอร์ส่วนใหญ่ไม่รองรับ ( caniuse.com/#search=se seamless ) และรูปแบบอื่น ๆ ส่วนใหญ่ไม่จำเป็น

— Pere

8

เพิ่มสิ่งนี้ใน css ของคุณเพื่อซ่อนแถบเลื่อนทั้งสอง

iframe 
{
  overflow-x:hidden;
  overflow-Y:hidden;
}

— Deepika Patel
แหล่งที่มา

6

นี่เป็นทางเลือกสุดท้าย แต่ควรค่าแก่การกล่าวถึง - คุณสามารถใช้::-webkit-scrollbarองค์ประกอบหลอกบนพาเรนต์iframeเพื่อกำจัดแถบเลื่อนที่มีชื่อเสียงในยุค 90

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

แก้ไข:แม้ว่าจะได้รับการสนับสนุนค่อนข้างมากแต่::-webkit-scrollbarอาจไม่เหมาะกับเบราว์เซอร์ทั้งหมด ใช้ด้วยความระมัดระวัง :)

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

2

นี่เป็นคำตอบเดียวที่ช่วยฉันได้ คุณยังเลื่อนได้ แต่ไม่เห็นแถบเลื่อนที่น่าเกลียด ขอบคุณ!

— Karmidzhanov

4

เพิ่มสิ่งนี้ใน css ของคุณเพื่อซ่อนแถบเลื่อนแนวนอน

iframe{
    overflow-x:hidden;
}

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

3

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

วิธีนี้จะทำให้ความกว้างของ Iframe ใหญ่กว่าที่ควรจะเป็น จากนั้นคุณซ่อนแถบเลื่อนแนวนอนด้วย overflow-x: hidden

— Nico Grill
แหล่งที่มา