Xóa thanh cuộn khỏi iframe

117

Sử dụng mã này

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

Đây là cách nó xuất hiện (hộp thoại trên trang chủ của http://www.talkjesus.com )

Làm cách nào để xóa thanh cuộn ngang và sửa đổi css của thanh cuộn dọc?

html css iframe

— Niềm tin vào những điều không nhìn thấy
nguồn

2

trùng lặp với stackoverflow.com/questions/4856746/... trong đó có một câu trả lời tốt hơn

— Daniel Tulp

9

trong css của bạn:

iframe{
    overflow:hidden;
}

— takien
nguồn

7

Cảm ơn, nhưng chỉ cuộn ngang và vẫn hiển thị trong Firefox. Không hiển thị trong Chrome cũng như IE. Ngoài ra, CSS cho thanh cuộn chỉ được áp dụng hiệu quả trong IE, không phải FF hay Chrome (sau này hiển thị màu / sắc thái màu be mặc định).

— Faith Trong Unseen Những điều

3

Điều này sẽ không hoạt động vì sự cố tràn xảy ra trong tài liệu iframe, mà bạn thường không thể sửa đổi do các hạn chế bảo mật iframe trên nhiều miền.

— thdoan

54

Điều này không hoạt động vì điều này sẽ không ảnh hưởng đến nội dung của iframe, chỉ là bản thân iframe. Giải pháp là cuộn = "không".

— Thế giới

4

Đây là một câu trả lời sai, không loại bỏ thanh cuộn trong google chrome, nhưng cuộn = "không" thì có.

— Anders Lindén

@LarsVandeDonk Câu trả lời của bạn phải là giải pháp chính xác.

— Wong Jia Hau,

313

Thêm scrolling="no"thuộc tính vào iframe.

— PHÁT TRIỂN
nguồn

1

có thể làm điều này với css?

— Evorlor

1

Có, nhưng sau đó trong Chrome không thể sử dụng scrollIntoView. Xem code.google.com/p/chromium/issues/detail?id=137214

— Peter Brand

1

tốt, điều này sẽ ẩn thanh cuộn của nội dung và ngăn việc cuộn nội dung. nó không ngăn thanh cuộn của iframe xuất hiện.

— Dave Cousineau

3

Thuộc tính cuộn trên iframe hiện đã chính thức lỗi thời. CSS nên được sử dụng thay thế.

— Mike Poole,

4

@MikePoole Nó có thể đã chính thức lỗi thời, nhưng nó không giúp ích cho việc cài đặt overflow:hidden;trên Chrome 65.0.3325.181, nhưng scrolling="no"đã giúp ích.

— một số

28

Điều này hoạt động trên tất cả các trình duyệt. jsfiddle tại đây http://jsfiddle.net/zvhysct7/1/

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

— Thyagarajan C
nguồn

21

Thêm scroll="no"và style="overflow:hidden"vào iframe không hoạt động, tôi phải thêm style="overflow:hidden"vào nội dung tài liệu html được tải bên trong iframe.

— nirvana74v
nguồn

1

Nếu điều này có ích, thì có một vấn đề trong Firefox, trong đó nếu bạn có CSS phần tử transform: scale(0.7)hoặc tương tự, điều này sẽ tạo ra các thanh cuộn (sẽ hiển thị trong iFrame của bạn), trừ khi bạn kẹp nó với overflow: hidden;tổ tiên (có thể là div thay vì thân hình).

— WraithKenny

8

Đó là bởi vì đó là 'cuộn = không', không phải 'cuộn = không'.

— Bryan Green

bạn có nghĩa là tải bên trong tải xung quanh của chúng tôi? Xung quanh là gì?

— João Pimentel Ferreira

được tải bên trong <iframe src = "/ test.html"> nơi test.html có cài đặt này.

— nirvana74v

16

Hãy thử thêm scrolling="no"thuộc tính như dưới đây:

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

Mở rộng đoạn mã

— Allabux B
nguồn

11

Chỉ cần Thêm scrolling="no"và seamless="seamless"thuộc tính vào thẻ iframe. như thế này:-

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

— Nima Rahbar
nguồn

13

Thuộc tính liền mạch đã bị xóa khỏi HTML .

— neopickaze

Bạn phải sử dụng css thay vì thuộc tính liền mạch.

— Nima Rahbar

@NimaRahbar Thuộc tính liền mạch có thể đã lỗi thời, nhưng css không hỗ trợ tham số iframe.

— Giỏ hàng bị bỏ rơi

9

Nếu ai ở đây là có một vấn đề với việc vô hiệu hóa thanh cuộn trên iframe, nó có thể là bởi vì nội dung của iframe có thanh cuộn trên các yếu tố dưới đây các htmlyếu tố!

Một số bố cục được đặt htmlvà bodythành 100% chiều cao, và sử dụng một #wrapperdiv với overflow: auto;(hoặc scroll), do đó di chuyển cuộn đến #wrapperphần tử.

Trong trường hợp như vậy, bạn sẽ không làm gì để ngăn các thanh cuộn hiển thị ngoại trừ việc chỉnh sửa nội dung của trang khác.

— WraithKenny
nguồn

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

Sử dụng div ở trên và nó sẽ không hiển thị thanh cuộn trong bất kỳ trình duyệt nào.

— KnightFury
nguồn

3

seamlessthuộc tính không phải là HTML5 hợp lệ, không được hỗ trợ bởi hầu hết các trình duyệt ( caniuse.com/#search=seamless ) và hầu hết các kiểu khác là không cần thiết.

— Pere

8

Thêm cái này vào css của bạn để ẩn cả hai thanh cuộn

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

— Deepika Patel
nguồn

6

Đây là phương sách cuối cùng, nhưng đáng nói - bạn có thể sử dụng ::-webkit-scrollbarphần tử giả trên phần tử iframegốc của nó để loại bỏ các thanh cuộn nổi tiếng của những năm 90 đó.

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

Chỉnh sửa: mặc dù nó được hỗ trợ tương đối , ::-webkit-scrollbarcó thể không phù hợp với tất cả các trình duyệt. sử dụng cẩn thận :)

— DotBot
nguồn

2

Đây là câu trả lời duy nhất giúp tôi. Bạn vẫn có thể cuộn nhưng bạn không thấy thanh cuộn xấu xí. Cảm ơn bạn!

— Karmidzhanov

4

Thêm cái này vào css của bạn để chỉ ẩn thanh cuộn ngang

iframe{
    overflow-x:hidden;
}

— Abhidev
nguồn

3

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

Như vậy, bạn làm cho chiều rộng của Iframe lớn hơn so với nó. Sau đó, bạn ẩn thanh cuộn ngang với tràn-x: ẩn.

— Nico Grill
nguồn