Юрий Матюхин

Минималистичный jQuery плагин, который проверяет элемент на наличие полосы прокрутки

Сегодня, столкнулся с задачей, в которой нужно было определить есть ли полоса прокрутки (скролл) у элемента (в моем случае у) или нет. Немного погуглив, нашел несколько интересных вариантов, которыми я хочу с вами поделиться.

 (function ($) {
    $.fn.hasScrollBar = function () {
        var hasScrollBar = {},
            e = this.get (0);
        hasScrollBar.vertical = e.scrollHeight > e.clientHeight;
        hasScrollBar.horizontal = e.scrollWidth > e.clientWidth;
        return hasScrollBar;
    }
}) (jQuery);

// Пример
$ ('html').hasScrollBar ().vertical
$ ('html').hasScrollBar ().horizontal

В дополнение к этому нашел Vanilla JS версию, которая проверяет на наличие вертикальной полосы прокрутки:

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

// Пример  (если не передать параметр node — то проверит у body)
hasVerticalScroll ()

Оба примеры рабочие, причем на втором отлично видны костыли для html/body и высчитыванием скролла. В то время как для обычных элементов достаточно проверить только node.scrollHeight > node.offsetHeight.

Read more!