14 апреля 2015  /  Фронтенд

Минималистичный 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.

⌘ ⌘ ⌘

Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.