Блог

Я очищаю Слабину, используя Кукольника. Я хочу проверить, прокрутил ли я начало ленты канала.

Проблема в том, что канал не прокручивается, поэтому я не могу использовать метод, описанный в MDN:

 element.scrollHeight - Math.abs(element.scrollTop) === element.clientHeight
 

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

 window.getComputedStyle(element).overflowY === 'visible'
 

Однако это не работает, я полагаю, по двум причинам. Во-первых, в этом случае похоже, что скрытое переполнение установлено в другой родительский контейнер, поэтому для контейнера, на который я смотрю, всегда установлен вычисляемый overflowY стиль visible . Во-вторых, дочерние элементы всегда будут переполняться в направлении Y, если я прокручен до самого верха (если я нахожусь вверху, они переполняются внизу).

Итак, как мне проверить, переполняется ли контейнер сверху и только сверху?

Если вы хотите проверить свой код на конкретном элементе, который я пытаюсь проверить в приложении Slack, вы входите в рабочую область Slack и выбираете этот элемент в консоли с помощью:

 document.querySelector(`[aria-label="${channelName} (channel)"]`)
 

Где channelName есть что-то вроде «общие» или как там называется активный канал, на котором отображается его канал.

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

 const channelFeed = document.querySelector(`[aria-label="${channelName} (channel)"]`)
const isScrolledToTop = channelFeed.getBoundingClientRect().y > 0
 

Это работает, так как контейнер канала не прокручивается. Он содержит элементы (сообщения), и он существует на странице во всю длину, за исключением того, что переполнение скрыто вверху и внизу. Это означает, что я могу проверить, по-прежнему ли верхний край выходит за пределы окна просмотра.