Проверка видимости скроллбара в div с overflow:auto в jQuery

Быстрый ответ

const hasScrollbar = element => element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
console.log(hasScrollbar(document.querySelector('.element')));

Функция hasScrollbar позволяет определить наличие как вертикальной, так и горизонтальной полос прокрутки. Подставьте в неё ваш элемент, и если результат будет true, значит, у элемента есть полоса прокрутки.

Глубже в тему: анализ отображения полосы прокрутки

Обнаружение вертикальной полосы прокрутки

Чтобы выявить наличие вертикальной полосы прокрутки у элемента, сравните scrollHeight и clientHeight. Если scrollHeight больше, значит, полоса прокрутки присутствует.

// Этот код позволяет обнаружить вертикальную полосу прокрутки
const hasVerticalScrollbar = element => element.scrollHeight > element.clientHeight;

Подробнее об этом расскажет наш спикер на видео

Выявление горизонтальной полосы прокрутки

Аналогично определению вертикальной полосы прокрутки, для горизонтальной сравниваем scrollWidth и clientWidth. Если первое заметно больше второго, полоса прокрутки имеется.

// Проверяем присутствие горизонтальной полосы прокрутки
const hasHorizontalScrollbar = element => element.scrollWidth > element.clientWidth;

Автоматическое оповещение о наличии полосы прокрутки

Автоматизируйте процесс уведомления о появлении полосы прокрутки при наведении курсора на определенный элемент:

// Оповещение о наличии полосы прокрутки
const element = document.querySelector('.watched-element');
element.addEventListener('mouseover', () => {
  if (hasScrollbar(element)) {
    alert('Здесь есть полоса прокрутки!');
  }
});

Создание повторно используемого детектора полос прокрутки

Облегчите себе задачу, создав услугу проверки наличия полос прокрутки, чтобы не писать новый код каждый раз.

// Инструмент для проверки наличия полос прокрутки, всегда готовый к работе
const ScrollbarDetector = {
  vertical: element => element.scrollHeight > element.clientHeight,
  horizontal: element => element.scrollWidth > element.clientWidth,
};

console.log(ScrollbarDetector.vertical(document.querySelector('.element')));

Визуализация

Представьте себя зданием с окнами. 🏢

// Проверяем наличие занавесок (полос прокрутки)
let isCurtainOpen = room => room.scrollHeight > room.clientHeight;

🏢 Каждое окно – это контейнер для содержимого. 🔍 Функция 'isCurtainOpen' – это ваши глаза.

Если вы видите больше содержимого, чем позволяет "окно" (viewport)...
🪟👓 ☞ 📜 (Да, полоса прокрутки видна)

Если вся информация умещается в рамках "окна"...
🪟👌 ☞ 🔳 (Полоса прокрутки отсутствует)

Ощущение отступов: борьба с эффектом заблуждения

При работе с CSS-отступами, clientHeight и clientWidth могут создавать иллюзию:

// Борьба с проблемой отступов
const getClientHeight = element => {
  const computedStyle = getComputedStyle(element);
  return element.clientHeight – parseFloat(computedStyle.paddingTop) – parseFloat(computedStyle.paddingBottom);
};

Жизнь на грани: динамическое содержимое и полосы прокрутки

Следите за изменениями в DOM, которые могут вызвать появление полосы прокрутки, используя обработчики событий или наблюдатель MutationObserver:

// MutationObserver отслеживает любые изменения
const observer = new MutationObserver(mutations => {
  mutations.forEach(() => {
    if (hasScrollbar(element)) {
      // Реагируем на неожиданное появление полосы прокрутки
    }
  });
});

observer.observe(document.querySelector('.dynamic-content'), { childList: true, subtree: true });

Plug & Play: в стиле jQuery

Иногда вы можете выбрать легкий путь и использовать jQuery:

// jQuery для быстрой проверки наличия полосы прокрутки
const hasJQueryScrollbar = element => $(element).prop('scrollHeight') > $(element).innerHeight();

Помните, что jQuery может быть не лучшим решением для всех проектов.

Полезные материалы

1. Свойство Element: scrollHeight – Web APIs | MDN — детали работы с прокручиваемой областью элемента в JavaScript.
2. Современное состояние стилизации полос прокрутки в CSS (Обновление 2022) | CSS-Tricks — последние новости о стилизации полос прокрутки.
3. Проверка наличия полос прокрутки у HTML элемента – Stack Overflow — обсуждения на тему определения видимости полос прокрутки.
4. Метод Window: getComputedStyle() – Web APIs | MDN — гид по работе с вычисленными стилями.
5. Свойство HTMLElement: offsetHeight – Web APIs | MDN — помощь в измерении визуальной высоты элемента.
6. Селектор :visible | Документация по API jQuery — селектор jQuery для определения видимости элементов.
7. Свойство Element: clientWidth – Web APIs | MDN — анализ ширины элемента, без учёта полосы прокрутки.