Kiểm tra xem phần tử HTML có thanh cuộn hay không

Cách nhanh nhất để kiểm tra xem một phần tử có thanh cuộn là gì?

Một điều tất nhiên là kiểm tra xem phần tử có lớn hơn khung nhìn của nó hay không, điều này có thể dễ dàng thực hiện bằng cách kiểm tra hai giá trị sau:

el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth

nhưng điều đó không có nghĩa là nó cũng có thanh cuộn (vì vậy nó thực sự có thể được cuộn bởi con người).

Câu hỏi

Làm cách nào để kiểm tra thanh cuộn trong 1 trình duyệt chéo và chỉ 2 javascript (như không có jQuery )?

Chỉ Javascript, vì tôi cần chi phí càng nhỏ càng tốt, vì tôi muốn viết một bộ lọc bộ chọn jQuery rất nhanh

// check for specific scrollbars
$(":scrollable(x/y/both)")

// check for ANY scrollbar
$(":scrollable")

Tôi cho rằng tôi phải kiểm tra overflowcài đặt kiểu nhưng làm cách nào để thực hiện điều đó trong một trình duyệt chéo?

Chỉnh sửa bổ sung

Không chỉ overflowcài đặt phong cách. Kiểm tra xem một phần tử có thanh cuộn hay không không phải là chuyện nhỏ. Công thức đầu tiên tôi đã viết ở trên hoạt động tốt khi phần tử không có đường viền, nhưng khi nó có (đặc biệt khi đường viền có chiều rộng đáng kể), offsetkích thước có thể lớn hơn scrollkích thước nhưng phần tử vẫn có thể cuộn được. Chúng tôi thực sự phải trừ đường viền khỏi thứ offsetnguyên để có được khung nhìn có thể cuộn thực tế của phần tử và so sánh nó với thứ scrollnguyên.

Để tham khảo trong tương lai

:scrollableBộ lọc jQuery selector được bao gồm trong .scrollintoview()plugin jQuery của tôi . Mã hoàn chỉnh có thể được tìm thấy trong bài đăng trên blog của tôi nếu ai đó cần nó. Mặc dù nó không cung cấp giải pháp thực tế nhưng mã của Soumya đã giúp tôi giải quyết vấn đề một cách đáng kể. Nó chỉ tôi đi đúng hướng.

Tôi đã tìm thấy cái này ở đâu đó vài tuần trước. Nó đã làm việc cho tôi.

var div = document.getElementById('container_div_id');

var hasHorizontalScrollbar = div.scrollWidth > div.clientWidth;
var hasVerticalScrollbar = div.scrollHeight > div.clientHeight;

/* you'll get true/false */

Thử:

Đối với thanh cuộn dọc

el.scrollHeight> el.clientHeight

Đối với thanh cuộn ngang

el.scrollWidth> el.clientWidth

Tôi biết điều này ít nhất cũng phù hợp với IE8 và Firefox 3.6+.

Điều này có vẻ (hoặc là) hơi khó hiểu, nhưng bạn có thể kiểm tra các thuộc tính scrollTopvà scrollLeft.

Nếu chúng lớn hơn 0, bạn biết rằng có thanh cuộn. Nếu chúng là 0, hãy đặt chúng thành 1 và kiểm tra lại chúng để xem bạn có nhận được kết quả là 1. Sau đó đặt chúng về 0.

Ví dụ: http://jsfiddle.net/MxpR6/1/

function hasScroll(el, direction) {
    direction = (direction === 'vertical') ? 'scrollTop' : 'scrollLeft';
    var result = !! el[direction];

    if (!result) {
        el[direction] = 1;
        result = !!el[direction];
        el[direction] = 0;
    }
    return result;
}

alert('vertical? ' + hasScroll(document.body, 'vertical'));
alert('horizontal? ' + hasScroll(document.body, 'horizontal'));

Tôi tin rằng có một thuộc tính khác dành cho IE, vì vậy tôi sẽ cập nhật điều đó sau một phút.

EDIT: Xuất hiện như thể IE có thể hỗ trợ thuộc tính này. (Tôi không thể kiểm tra IE ngay bây giờ.)

http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx

Đây là một giải pháp khác:

Như một số người đã chỉ ra, chỉ đơn giản so sánh offsetHeight và scrollHeight là không đủ vì chúng khác nhau về các phần tử bị ẩn tràn, v.v., vẫn không có thanh cuộn. Vì vậy, ở đây tôi cũng đang kiểm tra xem tràn là cuộn hay tự động trên các kiểu được tính cho phần tử:

var isScrollable = function(node) {
  var overflowY = window.getComputedStyle(node)['overflow-y'];
  var overflowX = window.getComputedStyle(node)['overflow-x'];
  return {
    vertical: (overflowY === 'scroll' || overflowY === 'auto') && node.scrollHeight > node.clientHeight,
    horizontal: (overflowX === 'scroll' || overflowX === 'auto') && node.scrollWidth > node.clientWidth,
  };
}

Tôi có thể đến bữa tiệc hơi muộn, nhưng ...

Tôi tin rằng bạn có thể phát hiện thanh cuộn bằng e.offsetWidth so với e.clientWidth. Chiều rộng bù đắp bao gồm đường viền và thanh cuộn, phần đệm và chiều rộng. Chiều rộng máy khách bao gồm phần đệm và chiều rộng. Vui lòng xem:

https://developer.mozilla.org/en/DOM/element.offsetWidth (hình ảnh thứ hai) https://developer.mozilla.org/en/DOM/element.clientWidth (hình ảnh thứ hai)

Bạn cần kiểm tra:

1. Phần tử có phần bổ sung được đặt thành tự động / cuộn (bao gồm cả trànX / Y) hay không bằng cách sử dụng kiểu tính toán / phân tầng / hiện tại.
2. Nếu phần tử có phần tràn được đặt thành tự động / cuộn. Thiết lập offsetWidth và clientWidth.
3. Nếu clientWidth nhỏ hơn offsetWidth - đường viền bên phải (được tìm lại thông qua kiểu computed / cascaded / current style), thì bạn biết mình có thanh cuộn.

Làm tương tự cho chiều dọc (offset / clientHeight).

IE7 báo cáo clientHeight bằng 0 cho một số phần tử (tôi chưa kiểm tra lý do tại sao), do đó bạn luôn cần kiểm tra tràn đầu tiên.

Hi vọng điêu nay co ich!

Có một số vấn đề trong trường hợp kiểm tra sự tồn tại của thanh cuộn, một trong số đó là trong mac bạn không có bất kỳ thanh cuộn nào có thể nhìn thấy được nên cả hai giải pháp trên đều không cho bạn câu trả lời chính xác.

Vì vậy, bởi vì hiển thị của trình duyệt không thường xuyên, bạn có thể kiểm tra cuộn có thay đổi cuộn và sau đó thiết lập lại:

const hasScrollBar = (element) => {
  const {scrollTop} = element;

  if(scrollTop > 0) {
    return true;
  }

  element.scrollTop += 10;

  if(scrollTop === element.scrollTop) {
    return false;
  }

  // undoing the change
  element.scrollTop = scrollTop;
  return true;
};

Chỉ lộn xộn ở đây vì không có giải pháp nào ở trên phù hợp với tôi (cho đến nay). Tôi đã tìm thấy một số thành công khi so sánh chiều dài cuộn của Div với độ lệch của nó

var oh = $('#wrapDiv').get(0).offsetHeight;
var sh = $('#wrapDiv').get(0).scrollHeight;

Nó dường như cung cấp cho tôi một so sánh chính xác ... cho đến nay. Có ai đó biết nếu điều này là hợp pháp?

Đối với IE11 (Internet Explorer 11), tôi đã phải thay đổi logic thành:

// Subtract 3 (a small arbitrary number) to allow for IE reporting a difference of 1 when no scrollbar is present
var hasVerticalScrollbar = div.scrollHeight - 3 > div.clientHeight;

Điều này là do IE báo cáo scrollHeight lớn hơn 1 so với clientHeight khi không có thanh cuộn nhưng lớn hơn khoảng 9 khi có thanh cuộn

Nếu bạn cần biết nếu có thanh cuộn cho toàn bộ trang web và với sự hỗ trợ đầy đủ của trình duyệt, bạn có thể sử dụng cái này:

const hasScrollbar = document.body.scrollHeight > window.innerHeight

Điều quan trọng là sử dụng window.innerHeightthay document.body.clientHeightvì vì trong một số trình duyệt di động, clientHeight sẽ không nhận được kích thước của thanh địa chỉ nhưng scrollHeight sẽ nhận được, vì vậy bạn sẽ tính toán sai.

không câu trả lời nào trong số này đúng. bạn phải sử dụng cái này:

var div = document.getElementById('container_div_id');

var hasHorizontalScrollbar = (div.offsetWidth > div.clientWidth);
var hasVerticalScrollbar = (div.offsetHeight > div.clientHeight);

Thêm một phần tử rộng 100% bên trong nó. Sau đó, đặt tràn thành ẩn. Nếu kiểu tính toán của phần tử (từ jQ) thay đổi, phần tử gốc có một thanh cuộn.

CHỈNH SỬA: Có vẻ như bạn muốn một phương pháp trình duyệt chéo như getComputedStyle . Thử:

function getCSS(_elem, _style)
{
    var computedStyle;
    if (typeof _elem.currentStyle != 'undefined')
        computedStyle = _elem.currentStyle;
    else
        computedStyle = document.defaultView.getComputedStyle(_elem, null);
    return computedStyle[_style];
}