Phát hiện xem một trang có thanh cuộn dọc hay không?

Tôi chỉ muốn một số JQ / JS đơn giản để kiểm tra xem trang / cửa sổ hiện tại (không phải một phần tử cụ thể) có thanh cuộn dọc hay không.

Googling cung cấp cho tôi những thứ có vẻ quá phức tạp chỉ đối với tính năng cơ bản này.

Điều này có thể giải quyết như thế nào?

$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($("body").height() > $(window).height()) {
        alert("Vertical Scrollbar! D:");
    }

    // Check if body width is higher than window width :)
    if ($("body").width() > $(window).width()) {
        alert("Horizontal Scrollbar! D:<");
    }
});

thử cái này:

var hasVScroll = document.body.scrollHeight > document.body.clientHeight;

Tuy nhiên, điều này sẽ chỉ cho bạn biết liệu chiều cao của cuộn dọc có lớn hơn chiều cao của nội dung có thể xem hay không. CáchasVScroll biến sẽ chứa đúng hay sai.

Nếu bạn cần kiểm tra kỹ lưỡng hơn, hãy thêm thông tin sau vào đoạn mã trên:

// Get the computed style of the body element
var cStyle = document.body.currentStyle||window.getComputedStyle(document.body, "");

// Check the overflow and overflowY properties for "auto" and "visible" values
hasVScroll = cStyle.overflow == "visible" 
             || cStyle.overflowY == "visible"
             || (hasVScroll && cStyle.overflow == "auto")
             || (hasVScroll && cStyle.overflowY == "auto");

Tôi đã thử câu trả lời trước và có vẻ như không hoạt động. $ ("Body"). Height () không nhất thiết đại diện cho toàn bộ chiều cao html.

Tôi đã sửa giải pháp như sau:

// Check if body height is higher than window height :) 
if ($(document).height() > $(window).height()) { 
    alert("Vertical Scrollbar! D:"); 
} 

// Check if body width is higher than window width :) 
if ($(document).width() > $(window).width()) { 
    alert("Horizontal Scrollbar! D:<"); 
} 

Hãy mang câu hỏi này trở lại từ cõi chết;) Có một lý do Google không cung cấp cho bạn một giải pháp đơn giản. Các trường hợp đặc biệt và các điều kỳ quặc của trình duyệt ảnh hưởng đến việc tính toán, và nó không hề tầm thường như nó tưởng tượng.

Thật không may, có vấn đề với các giải pháp được nêu ở đây cho đến nay. Tôi không có ý chê bai chúng - chúng là những điểm khởi đầu tuyệt vời và chạm đến tất cả các thuộc tính quan trọng cần thiết cho một cách tiếp cận mạnh mẽ hơn. Nhưng tôi không khuyên bạn nên sao chép và dán mã từ bất kỳ câu trả lời nào khác vì

• họ không nắm bắt được tác động của nội dung được định vị theo cách đáng tin cậy trên nhiều trình duyệt. Các câu trả lời dựa trên kích thước nội dung hoàn toàn bỏ lỡ điều này (nội dung không phải là phần cha bù đắp của nội dung đó trừ khi nó được định vị chính nó). Và những câu trả lời đó đang kiểm tra $( document ).width()và .height()trở thành con mồi cho sự phát hiện lỗi của jQuery về kích thước tài liệu .
• Dựa vào window.innerWidth , nếu trình duyệt hỗ trợ, làm cho mã của bạn không phát hiện được thanh cuộn trong trình duyệt trên thiết bị di động, nơi chiều rộng của thanh cuộn thường là 0. Chúng chỉ được hiển thị tạm thời dưới dạng lớp phủ và không chiếm dung lượng trong tài liệu . Phóng to trên di động cũng trở thành một vấn đề theo cách đó (câu chuyện dài).
• Việc phát hiện có thể bị loại bỏ khi mọi người đặt rõ ràng phần tràn của cả phần tử htmlvà bodythành các giá trị không mặc định (những gì xảy ra sau đó có một chút liên quan - xem mô tả này ).
• Trong hầu hết các câu trả lời, phần đệm nội dung, đường viền hoặc lề không được phát hiện và làm sai lệch kết quả.

Tôi đã dành nhiều thời gian hơn những gì tôi tưởng tượng để tìm ra một giải pháp "hiệu quả" (ho). Thuật toán tôi đưa ra hiện là một phần của plugin, jQuery.isInView , cho thấy một .hasScrollbarphương pháp . Hãy xem nguồn nếu bạn muốn.

Trong trường hợp bạn có toàn quyền kiểm soát trang và không phải xử lý CSS không xác định, việc sử dụng plugin có thể là quá mức cần thiết - sau cùng, bạn biết trường hợp nào áp dụng và trường hợp nào không. Tuy nhiên, nếu bạn cần kết quả đáng tin cậy trong một môi trường không xác định, thì tôi không nghĩ các giải pháp được nêu ở đây là đủ. Tốt hơn hết bạn nên sử dụng một plugin đã được thử nghiệm tốt - của tôi hoặc bất kỳ ai cũng được.

Điều này đã làm việc cho tôi:

function hasVerticalScroll(node){
    if(node == undefined){
        if(window.innerHeight){
            return document.body.offsetHeight> window.innerHeight;
        }
        else {
            return  document.documentElement.scrollHeight > 
                document.documentElement.offsetHeight ||
                document.body.scrollHeight>document.body.offsetHeight;
        }
    }
    else {
        return node.scrollHeight> node.offsetHeight;
    }
}

Đối với cơ thể, chỉ cần sử dụng hasVerticalScroll().

var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;

Kỳ lạ là không có giải pháp nào trong số này cho bạn biết liệu một trang có thanh cuộn dọc hay không.

window.innerWidth - document.body.clientWidthsẽ cung cấp cho bạn chiều rộng của thanh cuộn. Điều này sẽ hoạt động trong bất kỳ IE9 + nào (không được thử nghiệm trong các trình duyệt thấp hơn). (Hoặc để trả lời đúng câu hỏi,!!(window.innerWidth - document.body.clientWidth)

Tại sao? Giả sử bạn có một trang mà nội dung cao hơn chiều cao cửa sổ và người dùng có thể cuộn lên / xuống. Nếu bạn đang sử dụng Chrome trên máy Mac mà không cắm chuột, người dùng sẽ không thấy thanh cuộn. Cắm chuột vào và một thanh cuộn sẽ xuất hiện. (Lưu ý rằng hành vi này có thể được ghi đè, nhưng đó là AFAIK mặc định).

Tôi đã tìm thấy dung dịch vanila

var hasScrollbar = function() {
  // The Modern solution
  if (typeof window.innerWidth === 'number')
    return window.innerWidth > document.documentElement.clientWidth

  // rootElem for quirksmode
  var rootElem = document.documentElement || document.body

  // Check overflow style property on body for fauxscrollbars
  var overflowStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowStyle = rootElem.currentStyle.overflow

  overflowStyle = overflowStyle || window.getComputedStyle(rootElem, '').overflow

    // Also need to check the Y axis overflow
  var overflowYStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowYStyle = rootElem.currentStyle.overflowY

  overflowYStyle = overflowYStyle || window.getComputedStyle(rootElem, '').overflowY

  var contentOverflows = rootElem.scrollHeight > rootElem.clientHeight
  var overflowShown    = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle)
  var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll'

  return (contentOverflows && overflowShown) || (alwaysShowScroll)
}

    <script>
    var scrollHeight = document.body.scrollHeight;
    var clientHeight = document.documentElement.clientHeight;
    var hasVerticalScrollbar = scrollHeight > clientHeight;

    alert(scrollHeight + " and " + clientHeight); //for checking / debugging.
    alert("hasVerticalScrollbar is " + hasVerticalScrollbar + "."); //for checking / debugging.
    </script>

Cái này sẽ cho bạn biết nếu bạn có thanh cuộn hay không. Tôi đã bao gồm một số thông tin có thể giúp gỡ lỗi, thông tin này sẽ hiển thị dưới dạng cảnh báo JavaScript.

Đặt thẻ này vào thẻ script, sau thẻ đóng nội dung.

Tôi đã viết một phiên bản cập nhật của câu trả lời của Kees C. Bakker:

const hasVerticalScroll = (node) => {
  if (!node) {
    if (window.innerHeight) {
      return document.body.offsetHeight > window.innerHeight
    }
    return (document.documentElement.scrollHeight > document.documentElement.offsetHeight)
      || (document.body.scrollHeight > document.body.offsetHeight)
  }
  return node.scrollHeight > node.offsetHeight
}

if (hasVerticalScroll(document.querySelector('body'))) {
  this.props.handleDisableDownScrollerButton()
}

Hàm trả về true hoặc false tùy thuộc vào trang có thanh cuộn dọc hay không.

Ví dụ:

const hasVScroll = hasVerticalScroll(document.querySelector('body'))

if (hasVScroll) {
  console.log('HAS SCROLL', hasVScroll)
}

tôi sử dụng

public windowHasScroll()
{
    return document.body.clientHeight > document.documentElement.clientHeight;
}

Đơn giản chỉ cần so sánh chiều rộng của phần tử gốc tài liệu (tức là phần tử html) với phần bên trong của cửa sổ:

if ((window.innerWidth - document.documentElement.clientWidth) >0) console.log('V-scrollbar active')

Nếu bạn cũng cần biết chiều rộng thanh cuộn:

vScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;

Các giải pháp khác không hoạt động trong một trong các dự án của tôi và tôi đã kết thúc việc kiểm tra thuộc tính css tràn

function haveScrollbar() {
    var style = window.getComputedStyle(document.body);
    return style["overflow-y"] != "hidden";
}

nhưng nó sẽ chỉ hoạt động nếu thanh cuộn xuất hiện biến mất bằng cách thay đổi giá đỡ, nó sẽ không hoạt động nếu nội dung bằng hoặc nhỏ hơn cửa sổ.