Ẩn thanh cuộn ngang trên iframe?

110

Tôi cần ẩn thanh trượt ngang trên iframe bằng cách sử dụng css, jquery hoặc js.

— nkcmr
nguồn

1

có thể trùng lặp: Safari / Chrome (Webkit) - Không thể giấu iframe thanh cuộn dọc và những người khác

— Matt bóng

iframe không nằm trên cùng một miền với trang mẹ.

— nkcmr

tràn-y: ẩn; Không hoạt động trong Google Chrome, Safari và Opera. Hãy thử nó với jsfiddle.net/m5Btd/3

— phangia2712

208

Tôi khuyên bạn nên làm điều này với sự kết hợp của

CSS overflow-y: hidden;
scrolling="no" (cho HTML4)
~~và seamless="seamless"(đối với HTML5)~~*

^{* seamlessThuộc tính này đã bị xóa khỏi tiêu chuẩn và không có trình duyệt nào hỗ trợ.}

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

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

Mở rộng đoạn mã

— Chase Florell
nguồn

9

Tôi đã tải ví dụ của bạn trên Chrome 15 và vẫn thấy các thanh cuộn.

— Dan

61

Việc thêm scrolling="no"thuộc tính vào iframe dường như sẽ xóa các thanh cuộn trong Chrome.

— Nick

2

@Nick Nó không xóa nó trên chrome ít nhất là trên máy tính của tôi. img339.imageshack.us/img339/6685/chromelj.png

— l46kok

1

@ l46kok ảnh chụp màn hình của bạn không bao gồmscrolling="no"

— Chase Florell

3

Lưu ý rằng thuộc tính dường như không được hỗ trợ bởi bất kỳ trình duyệt chính nào . caniuse.com/#feat=iframe-seamless

— Liyali

26

đặt scrolling="no"thuộc tính trong iframe của bạn.

— Rahul Dadhich
nguồn

15

Nếu bạn được phép thay đổi mã của tài liệu bên trong của bạn iframevà nội dung đó chỉ hiển thị bằng cửa sổ mẹ của nó, chỉ cần thêm CSS sau vào của bạn iframe:

body {
    overflow:hidden;
}

Đây là một ví dụ rất đơn giản:

http://jsfiddle.net/u5gLoav9/

Giải pháp này cho phép bạn:

Giữ cho bạn HTML5 hợp lệ vì nó không cần scrolling="no"thuộc tính trên iframe(thuộc tính này trong HTML5 đã không được dùng nữa).
Hoạt động trên hầu hết các trình duyệt sử dụng CSS tràn: hidden
Không cần JS hoặc jQuery.

Ghi chú:

Để không cho phép thanh cuộn theo chiều ngang, hãy sử dụng CSS này thay thế:

overflow-x: hidden;

— GibboK
nguồn

2

Câu trả lời này chỉ áp dụng cho các trang web sử dụng Bootstrap. Tính năng nhúng đáp ứng của Bootstrap đảm nhận các thanh cuộn.

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

— Razan Paul
nguồn