(마이너스) 스크롤바없이 화면 너비를 얻는 방법?

(마이너스) 스크롤바없이 화면 너비를 얻는 방법?

---

요소가 있고 세로 스크롤 막대가없는 너비가 필요합니다.

Firebug는 몸 너비가 1280px라고 말합니다.

다음 중 하나는 Firefox에서 잘 작동합니다.

console.log($('.element').outerWidth() );
console.log($('.element').outerWidth(true) );

$detour = $('.child-of-element').offsetParent();
console.log( $detour.innerWidth() );

그들은 모두 내가 찾고있는 값인 1263px를 반환 합니다.

그러나 다른 모든 브라우저는 1280px를 제공합니다 .

(!) 세로 스크롤바없이 전체 화면 너비를 얻는 크로스 브라우저 방법이 있습니까?

---

.prop("clientWidth") 과 .prop("scrollWidth")

var actualInnerWidth = $("body").prop("clientWidth"); // El. width minus scrollbar width
var actualInnerWidth = $("body").prop("scrollWidth"); // El. width minus scrollbar width

에서 자바 스크립트 :

var actualInnerWidth = document.body.clientWidth;     // El. width minus scrollbar width
var actualInnerWidth = document.body.scrollWidth;     // El. width minus scrollbar width

_{추신 :scrollWidth 안정적 으로 사용하려면 요소가 수평으로 오버플로되지 않아야합니다.}

jsBin 데모

---

당신은 또한 사용할 수 .innerWidth()있지만 이것은 요소 에서만 작동합니다body

var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar 

---

간단히 다음과 같이 작성하여 바닐라 자바 ​​스크립트를 사용할 수 있습니다.

var width = el.clientWidth;

이를 사용하여 다음과 같이 문서의 너비를 가져올 수도 있습니다.

var docWidth = document.documentElement.clientWidth || document.body.clientWidth;

출처 : MDN

다음과 같이 스크롤바를 포함한 전체 창의 너비를 가져올 수도 있습니다.

var fullWidth = window.innerWidth;

그러나 이것은 모든 브라우저에서 지원되지 않으므로 폴백 docWidth으로 위와 같이 사용 하고 스크롤바 너비 에 추가하는 것이 좋습니다.

출처 : MDN

---

여기에 가정 몇 가지 예입니다 $elementA는 jQuery요소 :

// Element width including overflow (scrollbar)
$element[0].offsetWidth; // 1280 in your case

// Element width excluding overflow (scrollbar)
$element[0].clientWidth; // 1280 - scrollbarWidth

// Scrollbar width
$element[0].offsetWidth - $element[0].clientWidth; // 0 if no scrollbar

---

이 시도 :

$('body, html').css('overflow', 'hidden');
var screenWidth1 = $(window).width();
$('body, html').css('overflow', 'visible');
var screenWidth2 = $(window).width();
alert(screenWidth1); // Gives the screenwith without scrollbar
alert(screenWidth2); // Gives the screenwith including scrollbar

이 코드를 사용하여 스크롤 막대를 사용하거나 사용하지 않고 화면 너비를 얻을 수 있습니다. 여기에서 오버플로 값을 변경하고 body스크롤 막대를 사용하거나 사용하지 않고 너비를 얻습니다.

---

스크롤바없이 정확한 너비와 높이를 얻을 수있는 가장 안전한 곳은 HTML 요소입니다. 이 시도:

var width = document.documentElement.clientWidth
var height = document.documentElement.clientHeight

브라우저 지원은 꽤 괜찮은데, IE 9 이상이이를 지원합니다. OLD IE의 경우 여기에 언급 된 여러 대체 방법 중 하나를 사용하십시오.

---

I experienced a similar problem and doing width:100%; solved it for me. I came to this solution after trying an answer in this question and realizing that the very nature of an <iframe> will make these javascript measurement tools inaccurate without using some complex function. Doing 100% is a simple way to take care of it in an iframe. I don't know about your issue since I'm not sure of what HTML elements you are manipulating.

---

None of these solutions worked for me, however I was able to fix it by taking the width and subtracting the width of the scroll bar. I'm not sure how cross-browser compatible this is.

---

Here is what I use

function windowSizes(){
    var e = window,
        a = 'inner';
    if (!('innerWidth' in window)) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return {
        width: e[a + 'Width'],
        height: e[a + 'Height']
    };  
}

$(window).on('resize', function () {
    console.log( windowSizes().width,windowSizes().height );
});

참고URL : https://stackoverflow.com/questions/8339377/how-to-get-screen-width-without-minus-scrollbar