창 너비를 감지하고 스크롤 바 -JavaScript를 보상합니다

StackOverflow https://stackoverflow.com/questions/596072

  •  09-09-2019
  •  | 
  •  

문제

JavaScript로 사용자 창의 너비를 어떻게 감지하고 스크롤 바를 설명합니까? (스크롤 바 내부의 화면 너비가 필요합니다). 여기에 내가 가진 것이 있습니다 ... 여러 브라우저에서 작동하는 것 같습니다 ... 스크롤 바를 설명하지 않는다는 점을 제외하고는 ..

    function browserWidth() {
  var myWidth = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
  } else if( document.documentElement && document.documentElement.clientWidth ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && document.body.clientWidth ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
  }
  return myWidth;
}

어떤 아이디어? 모든 브라우저에서 작동해야합니다.)

도움이 되었습니까?

해결책

어떤 브라우저에 대해 어떤 속성이 지원되는지에 대한 큰 요약을 찾을 수 있습니다. 이 페이지에서 quirksmode.org.

가장 좋은 방법은 아마도 페이지에서 요소를 가져 오는 것일 것입니다 (support.body 또는 document.getElementById 등을 사용하여 OffSetepent 체인을 걸어 최상위 요소를 찾은 다음 해당 요소의 ClientWidth 및 ClientHeight를 검사하는 것입니다.

다른 팁

너비에만 관심이있는 경우 (현저하게 불쾌한) 해결 방법은 1px x 100% div를 생성하고 오프셋 전체를 사용하는 것입니다. IE> = 7, FF, Chrome, Safari 및 Opera에서 작동합니다 (IE6을 시도하지 않았습니다. -요즘 렌더링 정책 정책에 따라). 나는 div 꺼짐 문서를 걸었다 { position: 'absolute', top: '-1px', left: 0, width: '100%', height: '1px' }, 처음으로 필요할 때 만들었습니다.

위장 할 수 있다면 작동합니다.

Window.innerWidth () Check 전에 추가하기 만하면됩니다.

if (typeof(document.body.clientWidth) == 'number') {
    // newest gen browsers
    width = document.body.clientWidth;
    height = document.body.clientHeight;
}

이것이 제가 한 일입니다 - JavaScript를 배우는 데 반년 밖에되지 않으므로 이것은 나쁜 수정 일 수 있습니다. 먼저 투명한 사각형 이미지를 만들었습니다 (10px x 10px), 그러나 비 투명한 이미지를 만들어 JavaScript에 다음과 같이 추가 할 수 있습니다.
document.getElementById('getDimensions').style.visibility = "hidden";

HTML :

<img id="getDimensions" src="images/aSmallBox.png" alt="A small transparent image  
meant to determine the dimensions of the viewport" width="10px" height="10px"/>

자바 스크립트 :

//Inside function called by window.onload event handler (could go in CSS file, but   
//better to keep it with other related code in JS file)
document.getElementById('getDimensions').style.position = "fixed";
document.getElementById('getDimensions').style.bottom = "0px";
document.getElementById('getDimensions').style.right = "0px";   

//Everything below inside function called by window.onresize event handler
var baseWidthCalculation = document.getElementById('getDimensions').offsetLeft;
var baseHeightCalculation = document.getElementById('getDimensions').offsetTop;
  //Account for the dimensions of the square img element (10x10)
var viewportWidth = baseWidthCalculation + 10;
var viewportHeight = baseHeightCalculation + 10;

이것은 Tim Salai가 게시 한 아이디어의보다 효율적인 버전입니다 (막 시작했지만 오른쪽 하단에 요소를 배치하는 것이 훌륭했습니다).

var getDimensions = document.createElement("div");
getDimensions.setAttribute("style", 
            "visibility:hidden;position:fixed;bottom:0px;right:0px;");
document.getElementsByTagName("body")[0].appendChild(getDimensions);
var viewportWidth = getDimensions.offsetLeft;
var viewportHeight = getDimensions.offsetTop;

그리고 여기 모듈 식 버전이 있습니다

var PageDimensions = function(){
 var Width;
 var Height;     

 function pagedimensionsCtor (){
   var getDimensions = document.createElement("div");
   getDimensions.setAttribute("style" , 
         "visibility:hidden;position:fixed;bottom:0px;right:0px;");
   document.getElementsByTagName("body")[0].appendChild(getDimensions);
   Width = getDimensions.offsetLeft;
   Height = getDimensions.offsetTop;
   getDimensions.parentNode.removeChild(getDimensions);
 }
 pagedimensionsCtor();

 function Reset(){
  pagedimensionsCtor();
 }     

 function GetPageHeight(){
  return Height;
 }

 function GetPageWidth(){
  return Width;
 }

 return{
  Reset: Reset,
  GetPageHeight: GetPageHeight,
  GetPageWidth: GetPageWidth
 };
}

모듈 식 버전 사용 :

var page = new PageDimensions();
console.log("viewportWidth: " + page.GetPageWidth() + " viewportHeight: " + page.GetPageHeight());

보너스 기능 :

page.Reset();//just in case you think your dimensions have changed

나는 "Innerwidth"를 몸의 너비와 비교할 것입니다. 신체 너비> 내면이 있으면 스크롤 바가 있습니다.

if (browserWidth() < document.body.offsetWidth) {
  doSomething();
}

시도 할 수있는 또 다른 솔루션은 일부 CSS를 변경하는 것이므로 브라우저 창 대신 페이지 내에서 스크롤이 발생합니다. 바디 스타일에서 오버플로를 추가하십시오 : 자동. 이제 본문 요소에는 스크롤 바가 포함되어 있으므로 창 너비를 얻을 때 스크롤 컨테이너 외부 대신 너비를 측정합니다.

이것은 잠재적 인 기발함과 접근성 문제의 원천처럼 느껴지므로 광범위한 사용을하려면 매우 신중하게 테스트 할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top