Làm thế nào để có được chiều rộng màn hình mà không có (dấu trừ) thanh cuộn?

Tôi có một phần tử và cần chiều rộng của nó mà không có (!) Thanh cuộn dọc.

Firebug cho tôi biết chiều rộng cơ thể là 1280px.

Một trong hai cách này hoạt động tốt trong Firefox:

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

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

Tất cả đều trả về 1263px , đó là giá trị tôi đang tìm kiếm.

Tuy nhiên, tất cả các trình duyệt khác đều cung cấp cho tôi 1280px .

Có cách nào trên nhiều trình duyệt để có chiều rộng toàn màn hình mà không có (!) Thanh cuộn dọc không?

.prop("clientWidth") và .prop("scrollWidth")

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

trong JavaScript :

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

_{Tái bút: Lưu ý rằng để sử dụng scrollWidthmột cách đáng tin cậy, phần tử của bạn không được tràn theo chiều ngang}

jsBin demo

Bạn cũng có thể sử dụng .innerWidth()nhưng điều này sẽ chỉ hoạt động trên bodyphần tử

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

Bạn có thể sử dụng vanilla javascript bằng cách viết:

var width = el.clientWidth;

Bạn cũng có thể sử dụng điều này để lấy chiều rộng của tài liệu như sau:

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

Nguồn: MDN

Bạn cũng có thể lấy chiều rộng của toàn bộ cửa sổ, bao gồm cả thanh cuộn, như sau:

var fullWidth = window.innerWidth;

Tuy nhiên, điều này không được hỗ trợ bởi tất cả các trình duyệt, vì vậy để dự phòng, bạn có thể muốn sử dụng docWidthnhư trên và thêm chiều rộng thanh cuộn .

Nguồn: MDN

Dưới đây là một số ví dụ giả sử $elementlà một jQueryphần tử:

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

Thử cái này :

$('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

Bạn có thể nhận được chiều rộng màn hình có và không có thanh cuộn bằng cách sử dụng mã này. Ở đây, tôi đã thay đổi giá trị tràn của bodyvà lấy chiều rộng có và không có thanh cuộn.

Nơi an toàn nhất để có được chiều rộng và chiều cao chính xác mà không cần thanh cuộn là từ phần tử HTML. Thử cái này:

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

Hỗ trợ trình duyệt là khá tốt, với IE 9 trở lên hỗ trợ điều này. Đối với IE CŨ, hãy sử dụng một trong nhiều cách dự phòng được đề cập ở đây.

Tôi đã trải qua một vấn đề tương tự và đã width:100%;giải quyết nó cho tôi. Tôi đã tìm ra giải pháp này sau khi thử một câu trả lời cho câu hỏi này và nhận ra rằng bản chất của an <iframe>sẽ làm cho các công cụ đo lường javascript này không chính xác nếu không sử dụng một số chức năng phức tạp. Thực hiện 100% là một cách đơn giản để chăm sóc nó trong iframe. Tôi không biết về sự cố của bạn vì tôi không chắc bạn đang thao tác những phần tử HTML nào.

Không có giải pháp nào trong số những giải pháp này phù hợp với tôi, tuy nhiên tôi đã có thể sửa nó bằng cách lấy chiều rộng và trừ chiều rộng của thanh cuộn . Tôi không chắc điều này tương thích với nhiều trình duyệt như thế nào.

Đây là những gì tôi sử dụng

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