스크롤 막대(마이너스) 없이 화면 너비를 얻는 방법은 무엇입니까?

스크롤 막대(마이너스) 없이 화면 너비를 얻는 방법은 무엇입니까?

요소가 있는데 세로 스크롤바가 없는 너비가 필요합니다.

파이어버그에 따르면 몸 너비는 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

JavaScript에서:

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

_{추신: 사용할 내용에 유의하십시오.scrollWidth확실하게 당신의 요소는 수평으로 넘치지 않아야 합니다.}

jsBin 데모

---

사용할 수도 있습니다..innerWidth()하지만 이것은 오직 요소에서만 작동할 것입니다.

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

스크롤 막대 없이 정확한 너비와 높이를 얻을 수 있는 가장 안전한 위치는 HTML 요소입니다.사용해 보십시오.

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

브라우저 지원은 IE 9 이상이 이를 지원하는 꽤 괜찮은 편입니다.OLD IE의 경우, 여기에 언급된 많은 폴백 중 하나를 사용합니다.

다음은 가정한 몇 가지 예입니다.$element이다.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스크롤 막대가 있는 너비와 없는 너비를 구합니다.

저도 비슷한 문제를 겪었고 또 하고 있습니다.width:100%;해결해줬어요저는 이 질문에 대한 답을 시도한 후에 이 해결책에 도달했습니다. 그리고 그것의 본질을 깨달았습니다.<iframe>일부 복잡한 함수를 사용하지 않고 이러한 Javascript 측정 도구를 부정확하게 만듭니다.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 );
});

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