/ 

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

⌘ ⌘ ⌘
Поделиться
Отправить
Плавный, нативный скрол
Фронтенд

Плавный, нативный скрол

Выкиньте лишние библиотеки для прокрутки внутри страницы

Фронтенд

Безопасное использование CDN для jQuery, Angular, Bootstrap и других библиотек

Безопасно загружаем JavaScript библиотеки из публичных CDN с fallback-ом на локальную библиотеку. Jquery, Angular JS, Bootstrap и другие.

Как называть переменные
Фронтенд

Как называть переменные

Мой взгляд на соглашения наименования переменных, функций, методов и классов