Iframe HTML - tắt cuộn

Tôi có iframe sau trong trang web của mình:

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe>

Và nó có các thanh cuộn.
Làm thế nào để có được loại bỏ chúng?

Thật không may, tôi không tin rằng nó có thể hoàn toàn phù hợp với HTML5 chỉ với các thuộc tính HTML và CSS. Tuy nhiên, may mắn thay, hầu hết các trình duyệt vẫn hỗ trợ thuộc scrollingtính (đã bị xóa khỏi đặc tả HTML5 ).

overflowkhông phải là giải pháp cho HTML5 vì trình duyệt hiện đại duy nhất hỗ trợ sai điều này là Firefox.

Một giải pháp hiện tại sẽ là kết hợp cả hai:

<iframe src="" scrolling="no"></iframe>

iframe {
  overflow: hidden;
}

Nhưng điều này có thể bị lỗi thời khi trình duyệt cập nhật. Bạn có thể muốn kiểm tra điều này để tìm giải pháp JavaScript: http://www.christersvensson.com/html-tool/iframe.htm

Chỉnh sửa: Tôi đã kiểm tra và scrolling="no"sẽ hoạt động trong IE10, Chrome 25 và Opera 12.12.

Tôi đã giải quyết vấn đề tương tự với css này:

    pointer-events:none;

Nó dường như hoạt động bằng cách sử dụng

html, body { overflow: hidden; }

bên trong IFrame

chỉnh sửa: Tất nhiên điều này chỉ hoạt động, nếu bạn có quyền truy cập vào nội dung của Iframe (tôi có trong trường hợp của mình)

Đặt tất cả nội dung thành:

#yourContent{
 width:100%;
height:100%;  // in you csss
}

Vấn đề là cuộn iframe được đặt bởi nội dung KHÔNG phải bởi iframe của chính nó.

đặt nội dung thành 100% bên trong bằng CSS và mong muốn cho iframe trong HTML

Tôi đã thử cuộn = "không" trong trình duyệt hiện tại của mình (Phiên bản Google Chrome 60.0.3112.113 (Bản dựng chính thức) (64-bit)) và điều đó không hoạt động. Tuy nhiên, scroll = "no" đã hoạt động. Có thể đáng để thử

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scroll="no" style="overflow: hidden"></iframe>

Thêm kiểu này..cho thẻ iframe của bạn ..

overflow-x:hidden;
overflow-y:hidden;

Kể từ khi "tràn: ẩn;" thuộc tính không hoạt động bình thường trên chính iFrame, nhưng dường như cho kết quả khi áp dụng cho phần nội dung của trang bên trong iFrame, tôi đã thử điều này:

iframe body { overflow:hidden; }

Điều đáng ngạc nhiên là đã hoạt động với Firefox, loại bỏ những thanh cuộn khó chịu đó.

Tuy nhiên, trong Safari, một đường trong suốt rộng 2 pixel kỳ lạ đã xuất hiện ở phía bên phải của iframe, giữa nội dung và đường viền của nó. Thật kỳ lạ.

Chỉ cần thêm iframe được tạo kiểu giống như một trong hai tùy chọn bên dưới. Tôi hy vọng điều này giải quyết được vấn đề.

Lựa chọn đầu tiên:

<iframe src="https://www.skyhub.ca/featured-listing" style="position: absolute; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>

Tùy chọn thứ 2:

<iframe src="https://www.skyhub.ca/featured-listing" style="display: none;" onload="this.style.display='block';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>

Điều này phù hợp với tôi:

<style>
*{overflow:hidden!important;}
html{overflow:scroll!important;}
</style>

Lưu ý: nếu bạn cần thanh cuộn trong bất kỳ phần tử nào khác, hãy thêm css {overflow:scroll!important;}vào phần tử đó

Đối với khung này:

    <iframe src="" name="" id=""></iframe>

Tôi đã thử điều này trên mã css của mình:

    iframe#put the value of id here::-webkit-scrollbar {
         display: none;
    }

bên dưới các phiên bản html5

iframe {
    overflow:hidden;
}

Trong html5

<iframe seamless="seamless"  ....>


iframe[seamless]{

   overflow: hidden;
}

nhưng chưa được hỗ trợ chính xác

Bạn có thể sử dụng mã CSS sau:

margin-top: -145px; 
margin-left: -80px;
margin-bottom: -650px;

Để giới hạn chế độ xem của iframe.