IE10에서 스크롤 막대가 내용을 오버레이하지 않게하려면 어떻게해야합니까?

183

IE10에는 스크롤 막대가 항상있는 것은 아니며 오버레이로 나타날 때 멋진 기능이지만 풀 스크린 응용 프로그램이므로 내 특정 웹 사이트에서 사용하지 않으려 고합니다. 로고와 메뉴가 사라집니다.

IE10 :

여기에 이미지 설명을 입력하십시오

크롬:

여기에 이미지 설명을 입력하십시오

누구나 IE10에서 스크롤 막대를 항상 고정시키는 방법을 알고 있습니까?

overflow-y : scroll이 작동하지 않는 것 같습니다! 그것은 단지 내 웹 사이트에 영구적으로 넣습니다.

부트 스트랩이 문제를 일으킬 수 있지만 어떤 부분을 알지 못합니다! 여기에 예를 참조하십시오 : http://twitter.github.io/bootstrap/

html  css  scrollbar  internet-explorer-11  internet-explorer-10 
— 지미 1988
소스
내 IE10에이 동작이 없습니다. "Metro"앱으로 실행하고 있습니까?
— xec
아니, 난 아니에요. 차이가 나는 경우 Windows 8에 있습니다. 내 노트북에서도 마찬가지입니다 ... 예를 들어 stackoverflow와 같은 다른 웹 사이트가 그 주위에 방법을 찾았 기 때문에이 스크롤 막대 동작을 알지 못할 수 있습니다 ... 새로운 그림이 내가하는 것과 그렇지 않은 것의 차이점을 구별하는 데 도움이되기를 바랍니다. 원하는
— Jimmyt1988
설정된 너비의 페이지와 관련이 있습니까?
— Albzi
페이지 너비를 설정하면 효과가 있습니다. 아아, 크로스 브라우저 방식이 있는지 궁금합니다. 파이어 폭스, 사파리 및 크롬을 고려할 때이 동작이 없습니다. 내가 생각하는 IE10 특정 doo-raggy를 사용할 수 있습니다 .. 가장 우아한 답변처럼 보이지 않습니다.
— Jimmyt1988
@JamesT 나는 또한 w8에 있지만 IE10이 스크롤 막대를 오버레이로 렌더링하게하는 페이지를 찾을 수 없습니다 (내가가는 테스트 페이지조차도 www.arngren.net)
— xec

답변:

163

인터넷 검색을 한 후 "Blue Ink"가 남긴 설명이있는 토론을 우연히 발견했습니다.

페이지를 검사하면서 다음을 사용하여 페이지를 재현했습니다.

@ -ms-viewport {너비 : 장치 너비; }

스크롤바가 투명 해집니다. 콘텐츠가 이제 전체 화면을 차지하므로 의미가 있습니다.

이 시나리오에서 다음을 추가하십시오.

오버플로 -y : 자동;

스크롤바를 자동 숨기기

그리고에 부트 스트랩 반응-utilities.less 파일, 라인 (21)은 다음과 같은 CSS 코드를 찾을 수 있습니다

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

이 스 니펫은 문제의 원인입니다. 위의 주석 코드에 나열된 링크를 읽는 것이 좋습니다. (이 답변을 처음 게시 한 후에 추가되었습니다.)

— xec
소스
74
당신은 신사와 학자입니다! @ -ms-viewport {width : auto! important; } 내 CSS 파일로 이동하여 문제가 해결되었습니다. D
— Jimmyt1988
4
큰 대답은, 부트 스트랩의 의견에서 참조 한 기사를 읽는 것이 좋습니다 : timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design- 부트 스트랩에서 해당 코드를 제거하면 IE10 응답 성이 손상 될 수 있습니다. Windows 8 Metro
— tmsimont
@tmsimont 좋은 지적입니다. 또한 최신 Boostrap 소스 파일에서 주석을 변경 한 것 같습니다 (새로운 주석으로 내 대답이 업데이트되었습니다). 이제 UA 스니핑 스크립트를 사용하여 " Surface / desktop Windows 8" 에만 적용합니다. 이슈 링크 github.com/twbs/bootstrap/issues/10497
— xec
1
부트 스트랩을 좋아하지만 미디어와 뷰포트 옵션을 다른 파일로 분리하고 싶습니다. 나는 처음으로 반응 형 웹 사이트를 구축하고 있었고 문자 그대로 부트 스트랩에서 많은 물건을 제거하여 내 사이트 기능을 원하는 방식으로 제거해야했습니다.
— David
9
-ms- 오버플로 스타일 : 스크롤바; 더 깨끗한 해결책 인 것 같습니다 (두 번째 답변 참조).
— Manuel Arwed Schmidt
179

xec가 그의 답변에서 언급했듯이이 동작은 @ -ms-viewport 설정에 의해 발생합니다.

좋은 소식은 스크롤바를 다시 얻기 위해이 설정을 제거 할 필요가 없다는 것입니다 (이 경우에는 반응 형 웹 디자인을 위해 @ -ms-viewport 설정을 사용함).

이 기사에서 언급 한 것처럼 -ms-overflow-style을 사용하여 오버 플로우 동작을 정의 할 수 있습니다.

http://msdn.microsoft.com/en-us/library/ie/hh771902(v=vs.85).aspx

스크롤바를 다시 가져 오려면 스타일을 스크롤바로 설정하십시오.

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

스크롤 바

내용이 넘칠 때 요소에 클래식 스크롤 막대 유형의 컨트롤이 표시됨을 나타냅니다. -ms-autohiding-scrollbar와 달리 -ms-overflow-style 속성이 scrollbar로 설정된 요소의 스크롤 막대는 항상 화면에 나타나며 요소가 비활성 상태 일 때 사라지지 않습니다. 스크롤바는 내용을 오버레이하지 않으므로 표시되는 요소의 가장자리를 따라 추가 레이아웃 공간을 차지합니다.

— 스테판
소스
9
나는 이것을 html 요소에 추가했다 html{-ms-overflow-style: scrollbar;}. 다른 곳에서 이것이 필요한 사용 사례가 있습니까?
— nHaskins
7
body{-ms-overflow-style: scrollbar;}고마워요
— Manjit Singh
15
이것이 답이되어야합니다. 수락 된 것은 뷰포트 장치 적응을 제거합니다.
— mnsth
그것은 x에 오버플로를 추가합니다
— Monicka
1
@ stefan.s 이것은 정답입니다! 받아 들여야합니다
— eirenaios
12

해결 방법 : 두 단계-IE10을 감지 한 다음 CSS를 사용하십시오.

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

이 CSS를 추가하십시오 :

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

왜 작동합니까?

  • 는 overflow-y:scroll영구적으로 켜집니다 <body>태그 수직 스크롤.
  • -ms-overflow-style:scrollbar자동 숨기기 행동 꺼지고 따라서를 통해 컨텐츠를 밀어 우리에게 우리가 사용하고있는 스크롤 레이아웃 동작을 제공합니다.

IE11에 대해 묻는 사용자를 위해 업데이트되었습니다. -참조 https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)

— gdibble
소스
14
왜 body 만 수행하지 않겠습니까 {-ms-overflow-style : scrollbar; }?
— Scott Romack 2016 년
7
-1 코드가 IE11에서 작동하지 않으며 릴리스 될 때 IE12에서 작동하지 않습니다. IE 특정 스타일을 수행하는 더 좋은 방법이 있습니다.
— Joseph Lennox
1
@JosephLennox IE 고유 스타일을 수행하는 더 좋은 방법을 나타내는 답변을 추가 할 수 있다면 gdibble 과이 질문을하는 다른 사람들 모두에게 감사 할 것입니다.
— 눈에 띄는 컴파일러
2
@ConspicuousCompiler "-ms-"접두사는 이미 IE 만 적절하게 만듭니다.
— Joseph Lennox
5
이것은 @ stefan.s의 답변과 같지만 불필요한 팽창이 있습니다.
— Ry-
0

이 문제는 Bootstrap 4의 Datatables에서도 발생합니다. Mi 솔루션은 다음과 같습니다.

  1. 즉, 브라우저가 열려 있는지 확인합니다.
  2. 테이블 응답 클래스의 테이블 응답 클래스를 대체했습니다.

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');
        }
— 프리모 enko 코
소스
-4

@ -ms-viewport 및 기타 제안을 시도 했지만 Windows 7의 IE11에서는 내 경우에는 아무것도 작동하지 않았습니다. 스크롤 막대가 없었으며 여기의 다른 게시물은 대부분 스크롤 막대를 제공하지만 아무데도 스크롤되지 않았습니다. 많은 내용. 이 기사를 http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/ 에서 찾았 습니다. . .

body { overflow-x: visible; }

. . . 그리고 나를 위해 트릭을했다.

— 두꺼비
소스
2
문제는 스크롤 막대가없는 것이 아니라 부트 스트랩을 사용할 때 부작용으로 도입 된 반투명 스크롤 막대 오버레이에 관한 것입니다. 시도해 볼 수도 있습니다body { overflow: auto; }
— xec
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.