Làm cách nào tôi có thể ngăn thanh cuộn phủ nội dung trong IE10?

183

Trong IE10, thanh cuộn không phải lúc nào cũng ở đó ... và khi nó xuất hiện dưới dạng lớp phủ ... Đó là một tính năng thú vị nhưng tôi muốn tắt nó cho trang web cụ thể của mình vì đây là một ứng dụng toàn màn hình và của tôi logo và menu bị mất đằng sau nó.

IE10:

nhập mô tả hình ảnh ở đây

TRÌNH DUYỆT CHROME:

nhập mô tả hình ảnh ở đây

Bất cứ ai cũng biết một cách luôn luôn cố định thanh cuộn ở vị trí trên IE10?

overflow-y: scroll dường như không hoạt động! nó chỉ đặt nó vĩnh viễn trên trang web của tôi.

Nó có thể là bootstrap gây ra vấn đề nhưng phần nào tôi không biết! xem ví dụ ở đây: http://twitter.github.io/bootstrap/

html  css  scrollbar  internet-explorer-11  internet-explorer-10 
— Jimmyt1988
nguồn
IE10 của tôi không có hành vi này, bạn có đang chạy nó dưới dạng ứng dụng "Metro" không?
— xec
Khong toi khong. Tôi đang ở trong windows 8, nếu điều đó làm cho bất kỳ sự khác biệt. Nó cũng giống như trên máy tính xách tay của tôi ... Bạn có thể không nhận thấy hành vi thanh cuộn này bởi vì các trang web khác như stackoverflow chẳng hạn đã tìm ra cách xung quanh nó ... Tôi hy vọng hình ảnh mới giúp phân biệt sự khác biệt giữa những gì tôi làm và không muốn
— Jimmyt1988
Đây có phải là một cái gì đó để làm với một chiều rộng thiết lập của trang?
— Albzi
Đặt độ rộng của trang sẽ hoạt động .. than ôi, tôi đã tự hỏi nếu có một cách trình duyệt chéo. xem xét firefox, safari và chrome không có hành vi này. Tôi có thể sử dụng một doo-raggy cụ thể của IE10 mà tôi cho rằng .. chỉ không có vẻ là câu trả lời tao nhã nhất.
— Jimmyt1988
@JamesT Tôi đang trên W8 quá, nhưng không thể tìm thấy bất kỳ trang nào làm cho IE10 làm cho thanh cuộn như một lớp phủ (thậm chí không tôi đi đến trang kiểm tra, www.arngren.net)
— XEC

Câu trả lời:

163

Sau khi googling một chút, tôi tình cờ thấy một cuộc thảo luận trong đó một bình luận để lại bởi "Blue Ink":

Kiểm tra các trang, tôi quản lý để sao chép nó bằng cách sử dụng:

@ -ms-viewport {width: chiều rộng thiết bị; }

mà làm cho các thanh cuộn trở nên trong suốt. Có ý nghĩa, vì nội dung bây giờ chiếm toàn bộ màn hình.

Trong kịch bản này, thêm:

tràn-y: tự động;

làm cho thanh cuộn tự động ẩn

Và trong tệp bootstraps responsive-ích.less, dòng 21 bạn có thể tìm thấy mã CSS sau

// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/

@-ms-viewport {
  width: device-width;
}

Đoạn trích này là những gì gây ra hành vi. Tôi khuyên bạn nên đọc các liên kết được liệt kê trong mã nhận xét ở trên. (Chúng đã được thêm vào sau khi tôi ban đầu đăng câu trả lời này.)

— xec
nguồn
74
Bạn, quý ngài, một quý ông, và một học giả! Tôi đã đặt @ -ms-viewport {width: auto! Quan trọng; } vào tập tin css của tôi và giải quyết vấn đề: D
— Jimmyt1988
4
câu trả lời tuyệt vời, tôi muốn giới thiệu với những người khác rằng bạn đã đọc bài viết được tham chiếu trong bình luận của bootstrap: timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design - xóa mã đó khỏi bootstrap có thể phá vỡ khả năng phản hồi của IE10 trong Tàu điện ngầm Windows 8
— tmsimont
@tmsimont Điểm tốt. Ngoài ra, họ dường như đã thay đổi nhận xét trong tệp nguồn Boostrap mới nhất (đã cập nhật câu trả lời của tôi với các nhận xét mới), hiện đề cập đến việc sử dụng tập lệnh đánh hơi UA để áp dụng điều này cho " chỉ Windows / máy tính để bàn Windows 8" - kiểm tra ra liên kết vấn đề github.com/twbs/bootstrap/issues/10497
— xec
1
Tôi thực sự thích bootstrap nhưng tôi ước họ sẽ tách các tùy chọn phương tiện và chế độ xem trong một tệp khác. Tôi đã xây dựng một trang web phản hồi lần đầu tiên và tôi thực sự phải đi và loại bỏ rất nhiều thứ khỏi bootstrap để làm cho trang web của tôi hoạt động theo cách tôi muốn.
— David
9
-ms-overflow-style: thanh cuộn; dường như là giải pháp sạch hơn (xem câu trả lời thứ hai).
— Manuel Arwed Schmidt
179

Như xec đã đề cập trong câu trả lời của mình, hành vi này được gây ra bởi cài đặt @ -ms-viewport.

Tin vui là bạn không phải xóa cài đặt này để lấy lại thanh cuộn (trong trường hợp của chúng tôi, chúng tôi dựa vào cài đặt @ -ms-viewport cho thiết kế web đáp ứng).

Bạn có thể sử dụng kiểu -ms-overflow-style để xác định hành vi tràn, như đã đề cập trong bài viết này:

http://msdn.microsoft.com/en-us/l Library /ie / hh771902 (v = vs85) .aspx

Đặt kiểu cho thanh cuộn để lấy lại thanh cuộn:

body {
    -ms-overflow-style: scrollbar;
}

thanh cuộn

Cho biết phần tử hiển thị điều khiển loại thanh cuộn cổ điển khi nội dung của nó tràn ra. Không giống như -ms-autohiding-scrollbar, thanh cuộn trên các phần tử có thuộc tính kiểu -ms-overflow được đặt thành thanh cuộn luôn xuất hiện trên màn hình và không mờ dần khi phần tử không hoạt động. Thanh cuộn không che phủ nội dung và do đó chiếm thêm không gian bố cục dọc theo các cạnh của phần tử nơi chúng xuất hiện.

— stefan.s
nguồn
9
Tôi đã thêm phần này vào phần tử html, tức là html{-ms-overflow-style: scrollbar;}nó đã hoạt động với tôi. Sẽ có trường hợp sử dụng khi điều này là cần thiết ở nơi khác?
— naskins
7
body{-ms-overflow-style: scrollbar;}làm việc tốt cho tôi .. Cảm ơn
— Manjit Singh
15
Đây nên là câu trả lời. Cái được chấp nhận sẽ loại bỏ sự thích ứng của thiết bị viewport.
— mnsth
nó thêm tràn vào x
— Monicka
1
@ stefan.s đây là câu trả lời đúng! Nên được chấp nhận
— eirenaios
12

GIẢI PHÁP: Hai bước - phát hiện nếu IE10, sau đó sử dụng CSS:

làm điều này trên init:

if (/msie\s10\.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE10');
} else if (/rv:11.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE11');
}

// --OR--

$('body').addClass(
  /msie\s10\.0/gi.test(navigator.appVersion) ? 'IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? 'IE11' :
  ''  // Neither
);

// --OR (vanilla JS [best])--

document.body.className +=
  /msie\s10\.0/gi.test(navigator.appVersion) ? ' IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? ' IE11' :
  '';  // Neither

Thêm CSS này:

body.IE10, body.IE11 {
    overflow-y: scroll;
    -ms-overflow-style: scrollbar;
}

Tại sao nó hoạt động:

  • Việc overflow-y:scrollbật vĩnh viễn <body>thanh cuộn dọc thẻ.
  • Việc -ms-overflow-style:scrollbartắt hành vi ẩn tự động, do đó đẩy nội dung lên và cung cấp cho chúng tôi hành vi bố trí thanh cuộn mà chúng ta đều quen thuộc.

Cập nhật cho người dùng hỏi về IE11. - Tham khảo https://docs.microsoft.com/en-us/preingly-versions/windows/iNET-explorer/ie-developer/compabilities/ms537503(v=vs85)

— gdibble
nguồn
14
tại sao bạn không chỉ làm body {-ms-overflow-style: scrollbar; }?
— Scott Romack
7
-1 Mã của bạn không hoạt động trên IE11 và nó sẽ không hoạt động trên IE12 khi nó được phát hành. Có nhiều cách tốt hơn để làm các kiểu dành riêng cho IE.
— Joseph Lennox
1
@JosephLennox Nếu bạn có thể thêm câu trả lời để chỉ ra cách thực hiện tốt hơn các kiểu dành riêng cho IE, tôi chắc chắn cả gdibble và những người khác đi cùng câu hỏi này sẽ đánh giá cao nó.
— Trình biên dịch dễ thấy
2
@ConspicuptCompiler Tiền tố "-ms-" đã biến nó thành IE một cách đầy đủ.
— Joseph Lennox
5
Điều này giống như câu trả lời của @ stefan.s, nhưng với sự phình to không cần thiết.
— Ry-
0

Vấn đề này cũng xảy ra với Datatables trên Bootstrap 4. Giải pháp Mi là:

  1. Đã kiểm tra nếu trình duyệt tức là đang mở.
  2. Đã thay thế lớp đáp ứng bảng cho lớp phản hồi bảng tức là.

CSS:

.table-responsive-ie {
display: block;
width: 100%;
overflow-x: auto;}

JS:

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) //If IE
        {
            $('#tableResponsibleID').removeClass('table-responsive');
            $('#tableResponsibleID').addClass('table-responsive-ie');
        }
— Primoshenko
nguồn
-4

Đã thử @ -ms-viewport và các đề xuất khác nhưng không có tác dụng nào trong trường hợp của tôi với IE11 trên Windows 7. Tôi không có thanh cuộn và các bài đăng khác ở đây sẽ cung cấp cho tôi một thanh cuộn không cuộn ở bất cứ đâu mặc dù có nhiều nội dung. Tìm thấy bài viết này http://www.rlmseo.com/blog/overflow-auto-probols-orms-in-ie/ mà đã giảm xuống. . .

body { overflow-x: visible; }

. . . và đã lừa tôi.

— Con cóc
nguồn
2
Câu hỏi không phải là về các thanh cuộn bị thiếu, mà là về lớp phủ thanh cuộn bán trong suốt được giới thiệu như một hiệu ứng phụ khi sử dụng bootstrap. Bạn cũng có thể thửbody { overflow: auto; }
— xec
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.