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

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

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의 경우 여기에 언급 된 여러 대체 방법 중 하나를 사용하십시오.

나는 비슷한 문제를 경험했고 width:100%;나를 위해 해결했습니다. 나는이 질문에 대한 답을 시도하고의 본질이 <iframe>복잡한 기능을 사용하지 않고도 이러한 자바 스크립트 측정 도구를 부정확하게 만들 것이라는 것을 깨달은 후에이 솔루션을 찾았습니다 . 100 %는 iframe에서 처리하는 간단한 방법입니다. 어떤 HTML 요소를 조작하고 있는지 확실하지 않기 때문에 귀하의 문제에 대해 잘 모릅니다.

이 솔루션 중 어느 것도 나를 위해 일하지 않았지만 너비를 취하고 스크롤 막대 의 너비를 빼서 문제를 해결할 수있었습니다 . 브라우저 간 호환이 얼마나되는지 잘 모르겠습니다.

내가 사용하는 것은 다음과 같습니다.

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